Access elements in one frameset from other frameset - javascript

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.

Related

How to get an element from an iframe from another domain in JavaScript or jQuery?

I need to get the value of the last column from the following url, so that I can use that for input for another url.
This url is being displayed in an iframe, with it's source coming from another domain (the domain in the url above).
The part of my function containing this code is currently looking like this:
if (url) {
document.getElementById('techtable').innerHTML =
'<iframe id="myframe" src="' + url + '"></iframe>';
overlay.setPosition(coordinates);
var iframe = document.getElementById("myframe");
console.log(iframe);
var docu = iframe.contentDocument;
console.log(docu);
var elmnt = docu.getElementsByTagName("table")[0];
console.log(elmnt);
var idtext = $('elmnt tbody tr:first td:last').text();
console.log(idtext);
}
The console.log's can be seen in this screen capture:
What happens is that the second console.log is showing the document from the iframe, but it is only returning an empty head and body tag, while these tags are filled in the first log. The problem is that I cannot find a reason why this is occurring. It might be the fact that the source is from another domain, although I do not see any errors in the console, or that my function/syntax is wrong.
So, if it's possible, how do I get the value of the last column of the table in the iframe?
Two issues merit investigation:
The posted code is synchronous - it attempts to log the content of the iframe element before giving it a chance to load content across the net from the url set in its src attribute.
Possibly, and perhaps even likely, the second log which was made synchronously could be showing the document of an "about:blank" document object initially loaded in the iframe element.
Given that objects logged on the console tend to be live, the first log entry may have been updated after iframe content was loaded - or the log entry in the screen shot was expanded after loading was complete.
Access to documents from different domains my be blocked for security reasons. This does not necessarily mean console.log is blocked from showing the content, it means access to the content from JavaScript may be impossible.
How to debug
a) Access iframe content from within load event listeners registered on the iframe element.
b) test using a url from the same domain. If that works but access fails for documents from a different domain then you may need to investigate CORS further. Discussing hypotheticals here is a little early.

top.frames is not working in firefox

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.

javascript multiple forms on the same rendered screen

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'))

Swap div on link hover - Javascript error in Firefox

I have some code which allows me to hover over a number of links and subsequently replace the content in a specified DIV. It works in most browsers but Firefox gives an error - the error can be 'fixed' by removing the doctype code for the page, but clearly this means there is a massive problem with the code and it's not compliant.
Here is the Javascript:
var description = new Array();
description[0] = "Content one";
description[1] = "Content two";
description[2] = "Content three";
Each link looks like this, with a different number:
<a onMouseOver="FeatureSwap.innerHTML = description[1];">
And this is the DIV which has its content changed upon hovering on one of the links:
<div id="FeatureSwap">Default content here</div>
The error that Firefox throws up is:
FeatureSwap is not defined
innerHTML is an attribute of an element of the DOM, the Document Object Model.
So you need to first gain access to the element. In your case, the element is the div with id of FeatureSwap.
In the following code, we first look up the element by its ID using a method that is common to most all browsers. Then we set its innerHTML property.
Try
<a onMouseOver="document.getElementById('FeatureSwap').innerHTML = description[1];">
FYI, by removing the doctype declaration you led Firefox to display your page in "quirks mode" rather than the standards-compliant mode. One of the notable features of quirks mode in Firefox is that elements can be accessed by their IDs as if they were variables. For more information see the WHATWG spec.
Try:
<a onMouseOver="document.getElementById('FeatureSwap').innerHTML = description[1];">

Firefox not able to find 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)

Categories

Resources