Ajax chargeant la méthode de mise en œuvre de l'effet de couche contextuelle de page externe-js tutoriel-php.cn

Ajax chargeant la méthode de mise en œuvre de l'effet de couche contextuelle de page externe

亚连

Libérer： 2018-05-25 11:26:10

original

1714 Les gens l'ont consulté

Cet article présente principalement la méthode d'implémentation de l'effet de couche contextuelle du chargement de pages externes Ajax, impliquant les compétences d'implémentation de la couche contextuelle de chargement Ajax. C'est très simple et pratique. Les amis dans le besoin peuvent s'y référer. 🎜>

L'exemple de cet article décrit la méthode de chargement Ajax pour implémenter l'effet de couche contextuelle de page externe. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

<!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 Openp(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="Loading...";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display=&#39;&#39;;
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(&#39;Msxml2.XMLHTTP&#39;)}
catch (e) {
try {ret = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)}
catch (ee) {ret = null}
}
if (!ret&&typeof XMLHttpRequest !=&#39;undefined&#39;) 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=&#39;读取页面失败,文件&#39;+URL+&#39;不存在!&#39;;return}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$("Loading").innerHTML="<p class=&#39;LoadContent&#39;>"+xmlhttp.responseText+"</p>";
}
}
xmlhttp.send(null);
}
//-->
</script> 
</head>
<body>
<a href="javascript:Openp(500,300,&#39;index.html&#39;)">首页 500*300</a><br><br>
<a href="javascript:Openp(500,200,&#39;index.html&#39;)">Test 500*200</a><br><br>
<a href="javascript:Openp(200,500,&#39;l.html&#39;)">子页面 200*500</a><br><br>
<p id="Loading" style="display:none" ondblclick="this.style.display=&#39;none&#39;"></p>
注意：需加载的文件必须在子目录下，也就是本文件需处于上级才行。页面编码UTF8。
</body>
</html>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.