Asked  6 Months ago    Answers:  5   Viewed   57 times

I have an iframe for a cross-domain site. I want to read the DOM of the iframe, which I believed was possible because using the inspector, I can even modify the DOM of an iframe. Every way I attempt to read it, however, I run into the same origin policy. All I want, is the content loaded in my local DOM, from the iframe. I thought it would be as simple as $(document.body).find('iframe').html(), but that's returning the empty string.

I really hope there's a way to do this since the work I've been doing for the last several days has been predicated on this being do-able.

Thanks

 Answers

68

You can't. XSS protection. Cross site contents can not be read by javascript. No major browser will allow you that. I'm sorry, but this is a design flaw, you should drop the idea.

EDIT

Note that if you have editing access to the website loaded into the iframe, you can use postMessage (also see the browser compatibility)

Tuesday, June 1, 2021
 
Trott
answered 6 Months ago
83

The easiest way (if you can get code added to the external sites) is to have them add an invisible iframe pointing to a special html file on your domain. This could then use parent.parent.foo() to notify the original window about the load event.

Listening for the "load" event will only tell you if the window loaded, not what was loaded or if the document is ready for interaction.

Thursday, June 24, 2021
 
Corsair
answered 6 Months ago
58

I cant even tell you how many times I've ran into problems like this.

Read this community wiki on circumventing the same-origin policy to find a solution that works for you. Its one of the best same-origin resources I've found on the internet.

Alex Sexton of yayQuery also put together a screencast on some different methods

Monday, August 2, 2021
 
Rahul
answered 4 Months ago
90

CODE UPDATED

  • NOTE: since i received 3 up-votes i assume that this code is helping someone else other then the original OP; so i decided to update the code to reflect what it was meant to be at the beginning, since so far the OP and i have discovered that his problem was somewhere else in his code.

demo: http://so.lucafilosofi.com/iframes-loading-with-progress-bar-using-jquery/

head of main page

        var iframes = [], progress = 0;
        $(function() {
            $pGressIndex = $('#progress-bar-indicator');
            $('#navigation a').click(function() {

                var iframe_id = this.hash.split('#')[1];

                if (iframes.indexOf(iframe_id) === -1) {

                    $('#log').prepend('<p><strong>' + iframe_id + '</strong> is loading!</p>');

                    iframes.push(iframe_id);

                    if (parseInt($pGressIndex.width()) == 960) {
                        $pGressIndex.removeAttr('style');
                    }

                    var fW = (iframes.length > 1) ? (660 - (20 * iframes.length ) ) : 660;

                    $pGressIndex.animate({
                        width : fW
                    }, 5000);

                    var iframe_page = iframe_id + '.html';

                    if ($(this.hash).length != 0) {
                        $(this.hash).remove();
                    }

                    $('<iframe>').attr({
                        id : iframe_id,
                        src : iframe_page,
                        frameBorder : 0,
                        width : 960
                    }).appendTo('#iframes-wrapper');
                }
                return false;
            });
        });

bottom of main page:

            window.addEventListener("message", function(e) {
                console.log(iframes);
                var index = iframes.indexOf(e.data);
                iframes.splice(index, 1);
                if (iframes.length == 0) {
                    $pGressIndex.stop(true).animate({
                        width : 960
                    }, 100);
                }
                $('#' + e.data).show();
            }, false);

bottom of each iframe page:

           top.postMessage('frame-name-or-what-you-want', window.location.href);
Friday, August 6, 2021
 
FWH
answered 4 Months ago
FWH
10

Well I ended up taking a different approach. I got the contents from inside the iframe and inserted them inside a div. Here's the code in case anyone else needs it.. Thank you all for your patience and great help.

<script>
function getFile(){

var content = jQuery('#servercontent')[0];

var ifrm = jQuery('#ifrm')[0];

content.innerHTML = ifrm.contentDocument.body.innerHTML;

}
</script>
<body>
 <div id="servercontent"></div>
 <iframe id="ifrm" src="webinsamedomain.com" width="100%" frameborder="0" scrolling="no" style="display:none;"  onload="getFile();" ></iframe>
</body>
Tuesday, October 5, 2021
 
Asher
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share