I have two iFrames in my page and I would like to the value of an input field form one iFrame to an input field of the other iFrame. How can I do this?
You will need to set a hidden field or something in the parent:
window.opener.document.getElementById(Client ID of Hidden Field).value = Selected IDs;
You will then need to set the src attribute of the second iFrame and append the value as part of the querystring
something like:
<iframe id='iFrame2' src='/myPage.html?val=myValue' ></iFrame>
You can probably do this in javascript, when I did I did it with asp.net as the scenario was different but probably something like:
$('#iFrame2').attr('src', '/myPage.html?val=' + $('#myHiddenField').val());
Not the easiest. Can we assume that both the IFRAMES, and the parent document are all part of the same domain, and all the same doctype? If not, security restrictions are likely to block you.
Also, what browser(s) do yo uneed it to work in?
OK, given your answer above about being in the same domain, etc.
The answer about setting the URL of the IFRAME will work if you want to send/receive from the other IFRAME. However, I read it as you want to set a value in an existing field.
If that is the case, you need to do something like:
1. Assume IFRAMEs have the ids I1 and I2
2. Put this code on the parent page (you can trigger / place it in a child, but it gets more complicated as you need to handle load/ready state and do additional lookups.
var if1 = document.getElementbyId('I1');
var if2 = document.getElementbyId('I2');
//Or use $get from AJAX framework, etc
var doc1 = if1.document;
var doc2 = if2.document;
//These may throw security or load exceptions if the IFRAMES are not loaded, cross domain, or do not contain HTML.
doc2.getElementById('targetElement').value = doc1.getElementById('sourceElement').value;
//You should do the usual checking for the element existing, etc
Related
So I've tried to do a bunch of research and can't seem to find the correct answer for my question so I wanted to reach out and see if anyone knows much.
What I'm attempting to achieve:
Check the contents inside an iFrame and return a boolean whether there is content or not.
Here is what I've attempted:
function check_iframe_body_content(element) {
let has_content = false;
let iframe = element.contents().find('body');
console.log(iframe);
if (iframe.length > 0) {
has_content = true;
}
return has_content;
}
The element is the iFrame return, which will be an array:
When the script tags are disabled, I get the following return:
When the script tags are enabled, I get the following return:
How can I properly determine if the <body> is empty and when it's not? I've tried to do .length on multiple different occasions and each time it comes back as has_content = true because it finds the body element, but it's actually empty.
All help will be appreciated!
You wont have access to the content inside iframe if it's loaded from another website as it's a major security breach.
if that was possible a website could add an iframe to google.com and get access to user personal information like their email address, name and etc.
depending on why you want to check content of iframe, there might be other workarounds.
I have created one application where I am generating multiple nested iframes dynamically. In my structure, I have one iframe name as "list" along with same value to ID attribute. I get name as " ", In chrome when I tried to check its name as mentioned below:
"parent.content0.list" OR parent.frames['content0'].frames['list']
Only I get its name when I use index of its iframe like below
"parent.content0.frames[0]" OR parent.frames['content0'].frames[0]
All my iframes have name and Id attribute with same value.
Also, in chrome and Mozilla I get iframe instead of window object when i try below line of code on debugger:
parent.frames['content0'].frames['list']
but index path give window object
parent.frames['content0'].frames[0]
Check attached screen shot for more clarification. check this image
Let me know if you need any other details.
Don't know why iframe with index 0 have this issue in my code. All other iframes and index iframes are accessible and return correct value.
Because of this my form target is also not working as expected because my form has same iframe name as target.
Can anyone please help me to understand this behavior?
Note: Standalone code gives me correct name but dynamically created iframe[0] create an issue.
I have a list of links in the web-page and users can click and comment on them. I load the links via JSON and each link is uniquely identified by an id.
My question is how do I know which link has been clicked? Even though I have an id, where do I store it(If Javascript object, how?)? I guess I cannot have it as a tag attribute because users may change it.
It sounds like you want to be able to create a link to a page with a specific ID, without actually displaying the ID? If this is the case, I think you'll face difficulties doing that in a simple way, as javascript client-side and the user will most likely be able to alter the id anyway. I'd recommend keeping the id in the link (<a href="url.com/post/42>, for example) and rather, when the page is loaded, in some way or another, check if the provided URL is actually a valid, existing ID.
You can use data attributes which stays hidden from end user.
Eg: <a id="link1" data-myuniqueid="XXXXX"> Link1 </a>
Using Javascript, you can access/modify data values
var ele = document.getElementById("link1");
var uid = ele.getAttribute('data-myuniqueid'); // For compatibility
var uid = ele.dataset.myuniqueid; // HTML5 way - does not work in old browsers
if you need more explaination for using custom data attributes, this might help.
-- EDIT --
I guess above answer will not be sufficient to address your problem. You can store objects in data attributes or try something like this -
var ele = document.getElementById("link1");
ele.myuniqueid = "XXXXXX"
myuniqueid will not be visible to user even in source.
You can add it as a tag attribute - anything that is send to the browsers, users can change. If a user wants to change the id - let him do it. He can also click on the article that he wants to comment on and do that as well.
You can use the sessionStorage in HTML5 suppoerted by all the browsers. It can also retain if the page gets reloaded
//for setting value
sessionStorage.LinkClicked= "4";
//to get the value
var temp = sessionStorage.LinkClicked;
Here is the link for more info http://www.w3schools.com/html/html5_webstorage.asp
Hope, it may help you. Have anice day. :)
for storing data on the client side.
if your not fussy about cross browser compadablility, you could go with a html5 soultion such as local storage.
http://html5sql.com/
http://diveintohtml5.info/storage.html
if your looking to get the id from a element and your using jQuery you can uses this in your event handler
$().attr('id');
Is there anyway i can achieve the following by appending "div #B" from somewhere else like from another page or from somewhere in the body rather than writting it inside this script itself and not face same origin policy issues like when using JQuery's Load?
$('#A').append("<div id='B'><span><img src='i1.png'></span></div>");
You can use this to append an element's HTML in your body
$('#A').append($('#someelement').html());
This won't work with cross origin iframes because of same-origin policy. But you can get the HTML from another page by using AJAX, as long as the URL is in the same origin.
I'm sorry but if you wish to append a div, you must be able to specify it's contents and styles.
If you want to extract it from a div on the page do this:
var loadAble = $('#YourDivName').html();
$('#A').append("<div class="B"></div>");
$('#A .B').html(loadAble);
Remember to replace YourDivName respectively!
I know you said not to use .load(), but here goes anyway:
$('#A').append("<div class="B"></div>");
$('#A .B').load("yourFileGoesHere.html#YourDivName");
An alternative (untested) is to write:
var B = $('#A').append("<div class="B"></div>");
B.load("yourFileGoesHere.html#YourDivName");
I have an iframe. I want to access a table which present inside iframe.I want to access it from parent window of iframe. I have written JS like
Document.getElementById("table Id");
But the result come null. What is the process to get it?
thanks
x=document.getElementById("iFrameId");
x.contentDocument.getElementById("tableId");
if you can use jQuery i guess it will work across browsers
$("#iFrameId").contents().find("#tableId")
You have to select the element from the iFrame's document. Per Juan's comment, check against both the name, and id of the iFrame
var targetFrame = window.frames["nameOfIFrame"] || window.frames["iFrameId"];
targetFrame.document.getElementById("tableId");
EDIT
I just tested this with the following:
window.frames["fName"].document.getElementById("Adam").innerHTML
in the Chrome console, and it output the html of the Adam div from within my iframe.