首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议138:使用iframe实现异步通信

关灯直达底部

使用框架集实施异步交互存在着很多弊端:

❑一方面,页面被深深地打上框架的烙印,不利于结构优化,浏览器的支持也受到很多限制,需要更多的文件配合使用。

❑另一方面,框架集缺乏灵活性,要完全使用脚本控制异步请求与交互就非常不方便。iframe与frameset(框架集)都可以实现动态加载客户端或服务器端任何类型的网页文件,也就是说,它们的功能相同,但表现形式各异。iframe被定义为文档结构元素,与页面中其他普通元素无异,完全与框架集无关,但frameset被定义为窗口元素,与html、head和body等基本文档结构元素平行使用,可以说iframe与frameset分别属于不同级别的元素。因此,浮动框架可以插入到页面中的任意位置,与页面中其他元素能够很好地融合。同时开发人员还可以在JavaScript脚本中动态创建iframe元素并进行控制,这就给异步交互开发带来新的活力。下面仍然以上面的示例为基础进行扩展。

第1步,在客户端交互页面中新建函数hideIframe,使用该函数动态创建浮动框架,借助这个浮动框架实现与服务器进行异步通信,具体代码如下:


//创建浮动框架

//参数:url表示要请求的服务器端文件路径//返回值:无

function hideIframe(url){

var hideFrame=null;

hideFrame=document.createElement("iframe");

//创建iframe元素

hideFrame.name="hideFrame";

hideFrame.id="hideFrame";

hideFrame.style.;hideFrame.style.;

hideFrame.style.position="absolute";hideFrame.style.visibility="hidden";document.body.appendChild(hideFrame);setTimeout(function{

frames["hideFrame"].location.href=url;},10)

}


当使用DOM创建iframe元素时,应注意设置同名的name和id属性,因为不同类型浏览器在引用框架时会分别使用name或id属性值。在创建好iframe元素后,大部分浏览器(如Firefox和Opera)会需要一点时间(约为几毫秒)来识别新框架并将其添加到帧集合中,因此,当加载地址准备向服务器进行请求时,应该使用setTimeout函数将发送请求的操作延迟10 ms。当执行请求时,浏览器能够识别这些新的框架,避免发生错误。

如果页面中多处需要调用请求函数,则建议定义一个全局变量,专门用来存储浮动框架对象,这样就可以避免每次请求时都创建新的iframe对象。

第2步,修改客户端交互页面中request函数的请求内容,直接调用hideIframe函数,并传递URL参数信息。


function request{//异步请求函数

var user=document.getElementById("user");

var pass=document.getElementById("pass");

var s="iframe_serve.html?user="+user.value+"&pass="+

pass.value;

hideIframe(s);

}


由于浮动框架与框架集属于不同级别的作用域,浮动框架被包含在当前窗口中,所以应该使用parent而不是parent.frames[0]来调用回调函数,或者在回调函数中读取文档中的元素,代码如下:


function callback(b,n){

if(b&&n){

var e=document.getElementsByTagName("body")[0];

e.innerHTML="<h1>"+n+"</h1><p>您好,欢迎登录站点</p>";

}

else{

alert("你输入的用户名或密码有误,请重新输入");

var user=parent.document.getElementById("user");

var pass=parent.document.getElementById("pass");

user.;

pass.;

}

}


在服务器端响应页面中也应该修改引用客户端回调函数的路径,代码如下:


window.onload=function{

//...

parent.callback(b,n);

}


这样iframe浮动框架只需要两个文件:客户端交互页面(iframe_main.html)和服务器端响应页面(iframe_serve.html),就可以完成异步信息交互的任务。该示例的演示效果与建议137的示例相同,只不过完善了部分代码,因此不再进行效果演示和代码详解。