loading external webpage (different domain) into div

[jimhap]

Hello,

I am trying to load an external webpage from a different domain into a div.

I tried using a iframe, and use the innerHTML property to get the contents
and print it out, but it doesn't work, due to the cross domain restriction.

Is there any way to do this? (client side)

Thanks,
jimhap

[Snookerman]

An iframe should work, it should be something like this:

<iframe src="http://www.google.com/">Google</iframe>

If you want more help:

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.

[Nile]

You could try using PHP: File_get_contents:


$site = "http://dyanmicdrive.com";
echo $file_get_contents($site);

[jimhap]

An iframe should work, it should be something like this:

<iframe src="http://www.google.com/">Google</iframe>

If you want more help:

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.

WOW... that was fast... ;)

Here is my HTML:


<div name="iframe" id="iframe"></div>
<iframe id="foo" name="foo" src="http://www.w3schools.com/"></iframe>

and my Javascript is:


document.getElementById('iframe').innerHTML = frames['foo'].document.body.innerHTML

What I am trying to do is either:

1. Edit the innerHTML of the iframe...
OR
2. Get the innerHTML of the iframe and place it in the DIV. (as you see above in my JS)

So far, I've only heard that there could be a way to read the iframe's HTML,
but not on all browsers...

Thanks,
jimhap

[Snookerman]

Why not just have the iframe?

[jimhap]

You could try using PHP: File_get_contents:


$site = "http://dyanmicdrive.com";
echo $file_get_contents($site);


I said client, not server side.

It would work - IF external URL loading is enabled (php.ini), which isn't for my web host. :(

[jimhap]

Why not just have the iframe?

Since I would like to alter the contents inside the iframe....

More specifically, to load another page and edit a div's contents in the iframe.

[Nile]

Why not replace:


document.getElementById('iframe').innerHTML = frames['foo'].document.body.innerHTML

With:


document.getElementById('iframe').innerHTML = document.getElementById('foo').document.body.innerHTML;

[jimhap]

Why not replace:


document.getElementById('iframe').innerHTML = frames['foo'].document.body.innerHTML

With:


document.getElementById('iframe').innerHTML = document.getElementById('foo').document.body.innerHTML;


Hello,

Firefox (more precisely, Firebug) reports:


document.getElementById("foo").document is undefined

Is there anywayto get this to work on ALL browsers? :(

[phoenix79]

Since I would like to alter the contents inside the iframe....

More specifically, to load another page and edit a div's contents in the iframe.

try using jquery & ajax to load content upon action taken.

create your site as normal and create a link that calls the content you want to display. make sure you either return false or preventDefault() method to avoid content loading in external page.

//Atach an event to the link tag with a class of "next".
$("a.next").live("click",function(){
//get the address of the page to load.
var page=$(this).attr("href");

//This function will be called when the data has loaded.
function doSomethingWithData(data) {

//Select only the content inside the new pages #content div.
var newcontent=$(data).
find("#content");

//Insert the content into this pages #content div.
$("#content").
html(newcontent);
}

//load in the new page using AJAX.
$.get(page, doSomethingWithData);

//prevent the browser from performing the default link action.
return false;
});


now use the following in the head of your page to call the above script.

$('#content').load('mypage.html',function() {
//any code here runs once content has loaded.
});

this will require you to download jquery and upload to server but i think best method of calling in external content as completely cross browser.