使用框架集实施异步交互存在着很多弊端:
❑一方面,页面被深深地打上框架的烙印,不利于结构优化,浏览器的支持也受到很多限制,需要更多的文件配合使用。
❑另一方面,框架集缺乏灵活性,要完全使用脚本控制异步请求与交互就非常不方便。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的示例相同,只不过完善了部分代码,因此不再进行效果演示和代码详解。