I am using two iframes in my page
the parent page have a iframe say id = grandparent , src = "child.html".
and in child.html i am setting some variables and also there is a iframe in child.html say
id = parent, src="grandchild.html"
and from grandchild.html i am accessing the variable in child.html using the JavaScript
var value = top.frames['grandparent']
It is working fine in chrome but not working in firefox means with the value variable i am not able to access the variable of child.html
please help
The Firefox behavior is the one the spec calls for. See http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-window-nameditem-filter and the rules for browsing context names at http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element
WebKit has a known bug (see https://bugs.webkit.org/show_bug.cgi?id=11388 ) where it turns the iframe's id into the name of the window inside.
For your case, you just want to use name="grandparent" on the relevant iframe.
Related
I'm practicing navigating the DOM with Javascript and running into an issue. I'm aware of cross site scripting is not allowed, but I have a question.
I can post the HTML code if need be, but for the moment had a simple question.
When I run
iframe_dom = document.getElementsByTagName('iframe')[0]
console.log(iframe_dom)
This is what's printed out (abbreviated version)
<iframe style="width:100%;height:100%;"> .... </iframe>
#document
<html>
<head>..</head>
<body>
<iframe>...</iframe>
That's what I expected. However, when I try to navigate the tree by putting in:
iframe_dom.iframe
undefined is returned.
If I've passed the body of iframe into a a variable, why can't I navigate the tree?
How is not entirely consistent across browsers, and if you're executing your script on load, it may not be available yet.
Check out the Plunker below. I built it based on this: http://xkr.us/articles/dom/iframe-document/
function getChildTitle() {
var oIframe = document.getElementsByTagName('iframe')[0];
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
console.log(oDoc.body.getElementsByTagName('h1')[0].innerHTML);
}
In short, from the iframe element, sometimes you want the contentDocument property, sometimes contentWindow property - depending on browser. Take whichever one exists (or isn't falsey, in the code). In some browsers you may need to use that object's document property.
http://plnkr.co/edit/cSRD0qh5kntYR6aS8f1H
I'm working with classic ASP.
I have an 2 includes that have 2 different forms on them. They are both unique in name. However, when I try to read the value of the one the elements in the 2nd form I get an error saying it is null. However, when I view the source in Firebug I can see that in face there is a value in that element.
My javascript code:
console.log(document.getElementById('focusValue').value);
Output from firebug:
<input id="focusValue" type="hidden" value="1006" name="focusValue">
Is there something I need to do because there are 2 forms on this "rendered" screen? The only other thing I think I should mention is that these pages are in an iFrame. Not sure if that really matters...
An iFrame creates a separate document within the containing document, you need to get a reference to that document before you can access its content. There is a reasonable tutorial at http://www.dyn-web.com/tutorials/iframes/.
If you only have one iFrame in the page, then you can reference it by:
var frame = window.frames[0];
Or you could use an id with getElementById. To get a reference to the document:
var doc;
if (frame) {
doc = frame.contentDocument || frame.contentWindow.document;
}
Now you can get to the input element:
var input = doc && doc.getElementById('focusValue');
Of course this all depends on you complying with the same origin policy, otherwise you can't access the frame content.
Can't see your page, so it's hard to debug. Assuming the script runs AFTER the forms. The only thing i can think is that there is more than one element on the page with the id "focusValue".
What happens when you console.log(document.getElementById('focusValue'))
I have a html page in which I have two framesets each pointing to different html.
Now let's say, I have a textbox in first frameset (html) and a button in my second frameset (html).
Could anyone please let me know how to hide textbox when I click the button?
not tested, but it should be like this (in the onclick-handler of your button):
parent.frames[1].document.getElementByid('mytextfield').style.display = 'hidden';
// ^^^ here you could also access the frame by its name using ['mysecondframe']
you can do all of the above only if the two frames are in the same domain. Due to browsers security policies, if the frames aren't on the same domain and even on the same protocol, they cannot interact with each other ( javascript is out of the question ).
You can access the element via the getElementById function on the document object of the frame in question (note that we use the target frame's document, not our own). You can get the frame from the frameset by name — frame names become properties of the frameset's window object.
Example (live copy; button frame code):
var textbox = parent.targetFrame.document.getElementById('theTextBox');
textbox.value = "You clicked at " + new Date();
...where targetFrame is the name of the target frame. You can also use frames[n] where n is the index of the frame in the frameset, but I find names more robust.
The above example is tested and works on Firefox, Chrome, and Opera for Linux and IE6 — and so should work on a broad set of browsers.
How can I pass attribute value from iframe to parent?
I.e. iframe (frame1) has <a id="a1" href="http://www.infinitybusiness.net">. How can I get value of href in my parent page?
var fra = document.getElementById('frameId');
// following will work on same domain (or subdomain with document.domain set) only
var fraContent = fra.contentDocument || fra.contentWindow.document;
myLinkHref = fraContent.getElementById('myLinkId').href;
If this is cross-domain, then you will need to have access to add script to the child frame. If not, it can't be done without a server-side proxy.
This is a great tutorial that talks exactly about that:
http://www.roseindia.net/java/pass-value-example/pass-value-from-iframe-parent.shtml
you can use it only if the two pages are served from the same domain.
There are many solution for cross-domain scripting as well..you can read more here:
http://softwareas.com/cross-domain-communication-with-iframes
it is easy:
you should use %26 instead of & to send to iframe
for instance:
Link : 2.asp?ppp=/Payam.asp?sid=1%26PID=1&sa=12313
in Code : when i requset.queryString("ppp") in the parent it shows:
/Payam.asp?sid=1&PID=1
you can use this as source of your iframe , it has two parameter
<IFRAME name="My" src='<%=ppp %>'></IFRAME>
This is the iframe I'm trying to access:
<div class="mceBody" id="additionalTxt_b">
<iframe frameborder="0" id="additionalTxt_f" src='javascript:""' class="punymce"/>
</div>
Using this line:
frames['additionalTxt_f'].document.getElementsByTagName("body")[0].innerHTML
For some reason I'm getting "frames.additionalTxt_f is undefined" from firebug.
I have similar iframes (dynamically created by punyMCE plugin) on other pages, and they work perfectly fine. And IE7/8 has no problem accessing this iframe either.
Just at a complete loss here. Any ideas on why Firefox can't find the iframe?
The window.frames[] array is indexed by the [i]frame's name attribute (aka frame target). id can't be relied upon to also work — although it may in IE <8, which often thinks names and ids are the same thing.
If you want to access a frame's content via ID, use the DOM Level 2 HTML contentDocument property instead of the old-school (“DOM Level 0”) frames array:
document.getElementById('additionalTxt_f').contentDocument.body.innerHTML
...but then, for compatibility with IE <8, you also have to add some fallback cruft, since it doesn't support contentDocument:
var f= document.getElementById('additionalTxt_f');
var d= f.contentDocument? f.contentDocument : f.contentWindow.document;
d.body.innerHTML
So it's up to you which method you think is less ugly: the extra script work, or just using the name attribute.
if you have only 1 iframe you can also find it with window.frames[1] or
document.getElementsByTagName('iframe')[0]
(In the first option, the parent window is #0)