Getting html from cross domain iframe window

Question

I have an iframe in my index file and I want fetch all of the html from the iframe and store it in a variable. The content loaded inside of the iframe is from another domain. So I am trying to achieve this using javascript and postMessage and an eventListener. This is my code so far. I have a button which calls the click method.

index.vue

    click() {
        let iframe = document.getElementById('the_iframe');
        iframe.contentWindow.postMessage('Dont really know what to send here', '*');
        this.test();
    },
    test() {
        window.addEventListener('message', function(event) {
            //Just a test, as the it wont go in the else
            console.log(event.currentTarget.document);
            if (event.origin !== 'http://testdomain') {
                console.log('ERROR');
            } else {
                console.log(event.currentTarget.document);
                const html = event.currentTarget.document); 
                //This however doesnt work. The value is not stored in the const
                console.log(event.currentTarget.document);
            }
        });
    }

When I console log event.currentTarget.document it prints out the entire html structure of the site, including the parent page (index). My question is: How do i fetch all of the html of just the iframe inside of my index file? and how do I store it in a variable?

Possible Duplicate: https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript — DeepGunner, Feb 22 '19 at 11:19

score 0 · Answer 1 · answered Feb 22 '19 at 11:15

The window.addEventListener('message', code needs to appear in the parent document.

It needs to run automatically. It should not be inside a function.

(You can put it in a function, but it still needs to run first, and there is no reason to in this case).

The call to postMessage needs to be a in script in the document inside the frame and it needs to post the data that you want to the parent.

e.g.

window.parent.postMessage({ html: document.body.innerHTML }, '*');

Now, if you want to trigger the fetching of HTML in response to a click event, then both documents need window.addEventListener('message', and a postMessage call:

Parent window has a message listener that listens for a message with the HTML in it
Parent window has a click event handler that calls iframe.contentWindow.postMessage with a request for the HTML
Iframe document has a message listener that listens for a message with a request for the HTML and then calls window.parent.postMessage({ html: document.body.innerHTML }, '*');

Event.data is printing out [Object object]. When I try to parse I am getting undefined? How do I print it out? — Nick55, Feb 22 '19 at 11:52
@Jonathan — It's an object. Don't convert it to a string. Use `console.log` to inspect its structure. — Quentin, Feb 22 '19 at 11:53
I tried that. Thats when it says [Object object]. Here is the code. index.vue:click() { let iframe = document.getElementById('iframe'); iframe.contentWindow.postMessage('html', '*');}, — Nick55, Feb 22 '19 at 12:02

Getting html from cross domain iframe window

1 Answers1