Ajax加载外部页面弹出层效果实现方法

前端技术 2023/09/08 AJAX

本文实例讲述了Ajax加载外部页面弹出层效果实现方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" 
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Ajax加载外部页面的一个弹出层效果</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)
}
}
//创建XML对象
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=\'读取页面失败,文件\'+URL+\'不存在!\';return}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$(\"Loading\").innerHTML=\"<div class=\'LoadContent\'>\"+xmlhttp.responseText+\"</div>\";
}
}
xmlhttp.send(null);
}
//-->
</script> 
</head>
<body>
<a href=\"javascript:OpenDiv(500,300,\'index.html\')\">首页 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\')\">子页面 200*500</a><br><br>
<div id=\"Loading\" style=\"display:none\" ondblclick=\"this.style.display=\'none\'\"></div>
注意：需加载的文件必须在子目录下，也就是本文件需处于上级才行。页面编码UTF8。
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/21924

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案