Question

131

How can I access the DOM elements within an iFrame

rated 0 times [ 133] [ 2] / answers: 1 / hits: 62075 / 10 Years ago, mon, july 7, 2014, 12:00:00

I am writing a jQuery Plugin that needs to be able to run against DOM elements within an iFrame. I'm just testing this locally right now (ie url is file://.../example.html) and in Chrome I keep hitting SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin null from accessing a cross-origin frame. and in Safari I just get an empty document.

Given that both the parent file and the iFrame's file are coming off my local disk (in development) and will be coming off the same server (in production) I'd have thought that I'd not be subject to the cross-origin issues.

Is there a way I can convince the browser that my local files are actually of the same domain?

<aside>Interestingly in Safari, using the console directly, I can type $(iframe).get(0).contentDocument.find(ol) and it happily finds my list. In Chrome this same line throws the security error just as if it were being executed.</aside>

Update

Based on the suggestions below I have fired up a simple local web-server to test this and am now not getting the cross-origin error - yay - but neither am I getting any content.

My Javascript looks like

$(document).ready(function(){

  var myFrame = $(iframe),

      myDocument = $(myFrame.get(0).contentDocument),

      myElements;

  myDocument.ready(function(){

    myElements = myDocument.find(ul, ol);

    console.debug(success - iFrame, myFrame, document, myDocument, elements, myElements);

  });

});

The myDocument.ready is there just to ensure that the iFrame's document is ready - in reality it makes no difference.

I always end up with myElements being empty. ([] in safari or jQuery.fn.init[0] in Chrome)

But if I manually type this into the console:

$($(iframe).get(0).contentDocument).find(ol, ul)

I get my lists as expected. This is now the case in both Safari and Chrome.

So my question becomes: why can't my script see the DOM elements but the same code when entered directly into the browser's console can happily see the DOM elements?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

paolam

Add To Favorites

Follow

Total Points: 437

Total Questions: 107

Total Answers: 106

Location: Aland Islands

Member since Wed, Nov 17, 2021

3 Years ago

paolam questions

1 scrollIntoView is not working as expected in safari browser

Sun, Jan 3, 21, 00:00, 3 Years ago

1 Convert Array to object with custom keys in JavaScript

Thu, Oct 29, 20, 00:00, 4 Years ago

1 Cannot await for sqlite3.Database.get() function completion in Node.js

Thu, Jun 18, 20, 00:00, 4 Years ago

1 Using HTML 5 to change the keyboard language on mobile devices

Fri, Feb 21, 20, 00:00, 4 Years ago

1 Discord.js embed image spoiler

Wed, Nov 20, 19, 00:00, 5 Years ago

View All

answered 10 Years ago justynkaina · Accepted Answer

Chrome has default security restrictions that don't allow you to access other windows from the hard disk even though they are technically the same origin. There is a flag in Chrome that can relax that security restriction (command line argument on Windows is what I remember), though I wouldn't recommend running with that flag for more than a quick test. See this post or this article for info about the command line argument.

If you run the files off a web server (even if it's a local web server) instead of your hard drive, you won't have this issue.

Or, you could test in other browsers that aren't as restrictive.

Now that you've changed the question into something different, you have to wait for an iframe window to load before you can access the content in it and you can't use jQuery's .ready() on a different document (it doesn't work on another document).

$(document).ready(function() {

    // get the iframe in my documnet

    var iframe = document.getElementById(testFrame);

    // get the window associated with that iframe

    var iWindow = iframe.contentWindow;



    // wait for the window to load before accessing the content

    iWindow.addEventListener(load, function() {

        // get the document from the window

        var doc = iframe.contentDocument || iframe.contentWindow.document;



        // find the target in the iframe content

        var target = doc.getElementById(target);

        target.innerHTML = Found It!;

    });

});

Test page here.

EDIT: Upon further research, I found that jQuery will do some of this work for you like this and the jQuery solution appears to work in all the major browsers:

$(document).ready(function() {

    $(#testFrame).load(function() {

        var doc = this.contentDocument || this.contentWindow.document;

        var target = doc.getElementById(target);

        target.innerHTML = Found It!;

    });

});

Test page here.

In looking at the jQuery implementation for this, all it is really doing is setting up a load event listener on the iFrame itself.

If you want to know the nitty gritty details that went into debugging/solving the first method above:

In my trying to solve this issue, I discovered some pretty bizarre things (in Chrome) with iFrames. When you first look in the window of the iframe, there is a document and it says that its readyState === complete such that you think it's done loading, but it's lying. The actual document and actual <body> tag from the document that is being loaded via URL into the iframe is NOT actually there yet. I proved this by putting a custom attribute on the <body data-test=hello> and checking for that custom attribute. Lo and behold. Even though document.readyState === complete, that custom attribute is not there on the <body> tag. So, I conclude (at least in Chrome) that the iFrame initially has a dummy and empty document and body in it that are not the actual ones that will be in place once the URL is loaded into the iFrame. This makes this whole process of detecting when it's ready to be quite confusing (it cost me hours figuring this out). In fact, if I set an interval timer and poll iWindow.document.body.getAttribute(data-test), I will see it show as undefined repeatedly and then finally it will show up with the correct value and all of this with document.readyState === complete which means it's completely lying.

I think what's going on is that the iFrame starts out with a dummy and empty document and body which is then replaced AFTER the content starts loading. On the other hand, the iFrame window is the real window. So, the only ways I've found to actually wait for the content to be loaded are to monitor the load event on the iFrame window as that doesn't seem to lie. If you knew there was some specific content you were waiting for, you could also poll until that content was available. But, even then you have to be careful because you cannot fetch the iframe.contentWindow.document too soon because it will be the wrong document if you fetch it too soon. The whole thing is pretty broken. I can't find any way to use DOMContentLoaded from outside the iFrame document itself because you have no way of knowing then the actual document object is in place to you can attach the event handler to it. So ... I settled for the load event on the iFrame window which does seem to work.

If you actually control the code in the iFrame, then you can trigger the event more easily from the iFrame itself, either by using jQuery with $(document).ready() in the iFrame code with it's own version of jQuery or by calling a function in the parent window from a script located after your target element (thus ensuring the target element is loaded and ready).

Further Edit

After a bunch more research and testing, here's a function that will tell you when an iFrame hits the DOMContentLoaded event rather than waiting for the load event (which can take longer with images and style sheets).

// This function ONLY works for iFrames of the same origin as their parent

function iFrameReady(iFrame, fn) {

    var timer;

    var fired = false;



    function ready() {

        if (!fired) {

            fired = true;

            clearTimeout(timer);

            fn.call(this);

        }

    }



    function readyState() {

        if (this.readyState === complete) {

            ready.call(this);

        }

    }



    // cross platform event handler for compatibility with older IE versions

    function addEvent(elem, event, fn) {

        if (elem.addEventListener) {

            return elem.addEventListener(event, fn);

        } else {

            return elem.attachEvent(on + event, function () {

                return fn.call(elem, window.event);

            });

        }

    }



    // use iFrame load as a backup - though the other events should occur first

    addEvent(iFrame, load, function () {

        ready.call(iFrame.contentDocument || iFrame.contentWindow.document);

    });



    function checkLoaded() {

        var doc = iFrame.contentDocument || iFrame.contentWindow.document;

        // We can tell if there is a dummy document installed because the dummy document

        // will have an URL that starts with about:.  The real document will not have that URL

        if (doc.URL.indexOf(about:) !== 0) {

            if (doc.readyState === complete) {

                ready.call(doc);

            } else {

                // set event listener for DOMContentLoaded on the new document

                addEvent(doc, DOMContentLoaded, ready);

                addEvent(doc, readystatechange, readyState);

            }

        } else {

            // still same old original document, so keep looking for content or new document

            timer = setTimeout(checkLoaded, 1);

        }

    }

    checkLoaded();

}

This is simply called like this:

// call this when you know the iFrame has been loaded

// in jQuery, you would put this in a $(document).ready()

iFrameReady(document.getElementById(testFrame), function() {

    var target = this.getElementById(target);

    target.innerHTML = Found It!;

});