I am trying to a page load an external website's page within a div, but it's just not working....

Anyone got any ideas?

I do know it's possible:
http://orangoo.com/labs/GreyBox/ -- loads google.com in a popup

Here's my code

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="s1/style.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">

<script type="text/javascript">

* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false
loadpage(page_request, containerid)
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)

function loadpage(page_request, containerid){

	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
		document.getElementById(containerid).innerHTML="<center><img src='load.gif' /><br>"+ page_request.statusText +"</center>";

function loadobjs(){
if (!document.getElementById)
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref.setAttribute("src", file);
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
if (fileref!=""){
loadedobjects+=file+" " //Remember this object as being already added to page



<body onload="javascript:ajaxpage('http://www.google.com/','RESX'); ">

<div id="container">
	<div id="RESX">



You have at least 3 troubles there:

1. Possible copyright law violation if you don't have permission to use the materials.

2. A security violation. All files for a given page must usually come from the same server. Unless the user and the ISP severely reduce their security settings, anything else is suspected as malicious code by the security features.

3. Windows and frames are made to contain web pages. Div tags are not. You will have to strip the file to only some inner-body content to display it in a div. A popup is a window, not a div.

The script came from a tutorial site and I kept the copyright notice (says it can be used as such)

Guess I found out about the security part.

Any ideas on how to modify a page's content after it is loaded into an iframe? or at least get a portion of the page loaded in the iframe?

The security setting usually causing the block is of the form "disallow content from multiple sites."

commented: Thanks for your help +4

Thank you. Seems it's a standard across browsers not to allow scripts from different domains to interact.

Here is a link I found interesting:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.