<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>ajax loading a pop-up layer effect on an external page </title>
<style>
Body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background: #eeeeee; width:10px; height:10px}
. loadcontent {Width:100%;height:100%;overflow:auto}
</style>
<script language= "JavaScript" >
<!--
function $ () {return Document.getelementbyid?document.getelementbyid (Arguments[0]): eval (arguments[0]);}
var overh,overw,changedesc,changeh=50,changew=50;
function Opendiv (_DW,_DH,_DESC) {
$ ("Loading"). Innerhtml= "Loading ...";
OVERH=_DH;OVERW=_DW; Changedesc=_desc;
$ ("Loading"). style.display= ';
if (_DW>_DH) {Changeh=math.ceil ((_dh-10)/((_dw-10)/50)}else if (_DW<_DH) {Changew=math.ceil ((_dw-10)/((_ DH-10)/50)}
$ ("Loading"). style.top= (document.documentelement.clientheight-10)/2+ "px";
$ ("Loading"). style.left= (document.documentelement.clientwidth-10)/2+ "px";
Opennow ()
}
var nw=10,nh=10;
function Opennow () {
if (Nw>overw-changew) changew=2;
if (Nh>overh-changeh) changeh=2;
Nw=nw+changew; Nh=nh+changeh;
if (overw>nw| | OVERH>NH) {
if (OVERW>NW) {
$ ("Loading"). style.width=nw+ "px";
$ ("Loading"). style.left= (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH-NW)/2+ "px";
}
if (OVERH>NH) {
$ ("Loading"). style.height=nh+ "px";
$ ("Loading"). style.top= (DOCUMENT.DOCUMENTELEMENT.CLIENTHEIGHT-NH)/2+ "px"
}
Window.settimeout ("Opennow ()", 10)
}else{
nw=10; nh=10; changeh=50; changew=50;
Ajaxget (CHANGEDESC)
}
}
Creating an XML Object
function Createxmlhttps () {
var ret = null;
try {ret = new ActiveXObject (' Msxml2.xmlhttp ')}
catch (e) {
try {ret = new ActiveXObject (' Microsoft.XMLHTTP ')}
catch (ee) {ret = null}
}
if (!ret&&typeof xmlhttprequest! = ' undefined ') ret = new XMLHttpRequest ();
return ret;
}
function Ajaxget (URL) {
var xmlhttp = Createxmlhttps ();
Xmlhttp.open ("Get", url,true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate = = 4 && xmlhttp.status==404) {$ ("Loading"). Innerhtml= ' Read page failed, file ' +url+ ' does not exist! '; Return
if (xmlhttp.readystate = = 4 && xmlhttp.status = = 200) {
$ ("Loading"). Innerhtml= "<div class= ' loadcontent ' >" +xmlhttp.responsetext+ "</div>";
}
}
Xmlhttp.send (NULL);
}
-
</script>
<body>
<a href= "Javascript:opendiv (500,300, ' index.html ')" > Home 500*300</a><br><br>
<a href= "Javascript:opendiv (500,200, ' index.html ')" >test 500*200</a><br><br>
<a href= "Javascript:opendiv (200,500, ' l.html ')" > sub-page 200*500</a><br><br>
<div id= "Loading" style= "Display:none" ondblclick= "this.style.display= ' None '" ></div>
Note: The file that needs to be loaded must be in a subdirectory, that is, this file needs to be in the upper line. Page encoding UTF8.
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
Ajax loading a pop-up layer effect on an external page
