CODEWITHSUNDEEP
javascriptjqueryhtmldomframes
Olivier Blanchard
Olivier Blanchard

Reputation: 25

How does one have access to frame's document object from another frame?

Allright I have a page containing a frameset. One of these frames contains an asp page which contains a script written in javascript. This script needs to be able to access the content of an asp page which is contained inside another frame (in the frameset). Here's an example of the frameset code:

<frameset name="foo">
    <frame name="frame1" src="mydomain/path/of/the/page.asp">
    <frame name="frame2" src="mydomain/path/of/the/other/page.asp">

So basically the script inside the page contained within frame1 tries to access the contents (more specifically tries to insert a DOM element) inside the page contained within frame2.

Both frames are on the same domain (and subdomain), so cross-scripting shouldn't be an issue. I can't edit the code outside the script so I'm forced to use frames. Here's my current code : 

//Ideally, I would like to make sure the page contained within frame2 is loaded before trying to access it's elements. I still need to figure that one out. 
$(document, window.parent).ready( function () {    
    //Assign id "foo" to frame2 using jQuery
    $('frame[name="foo"]', window.parent.document).attr("id", "foo"); 
    var doc;
    var testNode;
    var frmObj = window.parent.document.getElementById('foo'); 
    if (frmObj.contentDocument) { // DOM
        doc = frmObj.contentDocument;
    } 
    else if (frmObj.contentWindow) { // IE 
        doc = frmObj.contentWindow.document;
    }
    if (doc) {
        testNode = doc.createElement('div');
        testNode.Id = "testNode";
        doc.getElementByTagName('body').appendChild(testNode);
    }
});

The line containing getElementByTagName throws an error in IE 10 :

SCRIPT438: Object doesn't support property or method 'getElementByTagName'

It seems that the document object don't have any method named getElementByTagName. In that case, one could say that the document object doesn't exist, which is absurd since I've tested it's existence before trying to call it's methods. Knowing all this, how can we solve this issue?

Notes :

Many thanks!

Upvotes: 2

Views: 4203

Answers (1)

Teemu
Teemu

Reputation: 23406

Frames are not supported in HTML5, and if you would have a proper documenttype declaration, you'd see a blank page.

Anyway, no need to use jQuery, this is much more simple: to frameset window you refer always with top, all frame windows you can catch with top.frame_name (id is not needed), no matter where you want to refer them. When you need a document, it's just right under window object. In your case: top.frame1.document or top.document.

Notice also, that foo is the name of the frameset, not any frame. Hence $('frame[name="foo"]', window.parent.document).attr("id", "foo"); is not doing what you expect. (Or maybe just a typo in the post?)

This should do the job, though top might be ready for a long time before the body in frame2 exists.

$(document, top).ready(function () {    
    var testNode,
        frmObj = top.frame2,
        doc = frmObj.document;
    if (doc) {
        testNode = doc.createElement('div');
        testNode.id = 'testNode';
        doc.body.appendChild(testNode);
    }
});

Upvotes: 3

Related Questions