How to Close Ajax Generated Window?

Hi,

I got an Ajax script from Dynamic Drive called "Dynamic Ajax Content" that loads external pages into a DIV in the Parent page. The effect is much like that of an iFrame.

The way I have it set up, I can load any of several linked external pages (all on my server, BTW).
However, the script as it is now does not have a function to Close the external (Child) page, leaving just the initial Parent page.
I dummied up a "fix" by coding this on the Child Page:
<a href="" target="_parent">Close</a>
While this "works", I was looking for something a bit more elegant.

Here is the Javascript code that loads the external page into the Parent page:

<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){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
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)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(containerid).style.display="none"
document.getElementById(containerid).innerHTML=page_request.responseText
document.getElementById(containerid).innerHTML=document.getElementById("clip").innerHTML
document.getElementById(containerid).style.display="block"
}
}

function loadobjs(){
if (!document.getElementById)
return
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=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

Code (markup):

Below is the relevant part of the HTML (Parent Page) that calls the Javascript:

<a href="javascript:ajaxpage('lion-king.html', 'contentarea');">The Lion King</a></p>
	<div id="contentarea">
	</div>

HTML:

Lastly, here is the relevant code from the External Child page that is loaded into the Parent Page:

<div id="clip">
<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/wJol_9bLaQM&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/wJol_9bLaQM&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>
<br /><br />
	<a href="" target="_parent">Close</a>
</div>

HTML:

I see that live links are not available to me as of yet, so I am including an attachment with this post that contains links to my page, that employs this script, as well as a link to the Dynamic Drive script page.

So again, if anyone has a better solution as to how to close the Ajaz generated Child page, leaving only the initial Parent page, I would appreciate it

 

I havn't really got time to look into this properly but try:
<a href="javascript:document.getElementById('contentarea').style.display='none';">Close</a>

 

Hi Cam,
Thanks for the fast reply.
I put your code into one of the the "child pages" ("The Good the Bad and the Ugly") to test it.
It loads a page that say "none".

 

I played around a bit with the code camjohnson supplied and this works:

<a style="cursor: pointer;"onclick="javascript:document.getElementById('contentarea').style.display='none';">Close</a>

HTML:

PAGE:
http://www.inatheaternearyou.com/peak-moments/peak-moments.html
(Good Bad Ugly link)

I dunno, without getting to obsessive, is this as good as it gets?

 

The code wasn't working, because of the ' used instead of ". It is hiding the contentarea div, so it's just what you want...

 

don't you think there should be a space after pointer;" then?

 

Thanks to all for their input -- I appreciate it

Rick