Copy html content from iframe into div ( ajax )?

Question

Lets assume I have my browser load an Iframe with <iframe src="test.html">

Can I, using ajax, load the content of test.html into a div in the main html page?

This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts. The plan is to generate the dynamic page with 0 sized iframe which makes report request to remote host. Then, after the page (& iframe content) loads I will copy the iframe content into a div using JS.

Tips are appreciated,

Thank you, Maxim.

Answer 1

No, you can't.

When you load a page from a different domain into the iframe, it becomes unreachable. You can no longer access the contents of the iframe, as it comes from a different domain.

The only thing that I know of that you can reliably load from a different domain is a script, which JSONP uses.

Answer 2

Can I, using ajax, load the content of test.html into a div in the main html page?

Yes (since your example has a relative URI and is on the same host) …

This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts.

… and no. You still can't read data from remote hosts.

Answer 3

I'm sure someone will correct me if I'm wrong, but I believe that scripting across domain boundaries is restricted. Have you tried it? Here's a function that may help out.

function insertDivFromFrame(divname, framename) {
    var frame = document.getElementById(framename);
    var d = frame.contentWindow || frame.contentDocument;
    if (oDoc.document) {d = d.document;}
    document.getElementById('yourdiv').innerHTML = d.body.innerHTML;
}

I'm not sure this code works... see http://xkr.us/articles/dom/iframe-document/ for more help on this.