JQuery cross origin iframe innerHtml

Question

I want to read iframe contents that have loaded third-party URL.

I can postMessage simple string from iframe to form. But want to pass innerHtml or want to access it from an unload callback. It always gives cross-origin. Please let me know how to access the HTML of the remote site and send it to the form?

HTML code as below:

// here somehow want to send html of iframe......

<p><a href="http://thirdparty_url.com/" target="myFrame">ICWT Page</a></p>

scripts and postmessage code:

<script type="text/javascript">

    function on_load(iframe,mystring, mywindow) {
        var win = (iframe.contentWindow || iframe.contentDocument);

        // or here want to access HTML of iframe and post to form.

        alert(mystring);

        mywindow.postMessage(mystring, "*");
    };

    function listener(event) {
        alert(event.data);
    }

    if (window.addEventListener) {
        window.addEventListener("message", listener, false);
    }
    else {
        attachEvent("onmessage", listener);
    }
</script>

Or send innerHtml from iframe to on_load();

< iframe src="index.cfm" name="myFrame" onload="on_load ( this, document.body.innerHtml, window ) ">< /iframe > 

Here document.body.innerHtml -> I am trying to assume it has contents of iFrame which has loaded third party url.

Answer 1

Maybe this answer's a little late, but if I understand your question, this isn't possible without the cooperation of the page that's loaded into your iframe. If it's on another domain than yours, it would have to use window.postMessage to send you its innerHTML.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

EDIT: Finally, I have yet to try this out myself. But this might work if the iframe thinks the web page is coming from your own server instead of somewhere else...?

How to use Cors anywhere to reverse proxy and add CORS headers