JavaScript结合iframe实现无刷新加载整页的方法

jQuery与iframe加载方式对比

jQuery库提供了一个便捷的load()方法，其基本用法为$("#div").load("/index.html");。该语句的作用是将index.html页面的内容加载到ID为div的HTML容器中。

使用iframe同样可以实现类似功能，但效果可能不如上述jQuery方法理想。参考Discuz等网站的做法，例如登录时弹出的层也是加载的一个页面。但有一个现象值得注意：在状态栏左侧会显示“正在打开about:blank”，这可能是因为将iframe的src属性设置为about:blank后再进行编辑所致。此外，查看源代码时无法看到加载页面的源码，这是否采用了与jQuery类似的分析head并将载入页面的头部信息添加到主页面头部，再使用eval()函数执行JavaScript代码的方式，尚需进一步验证。

基于do.html的容器加载方案

以下示例使用一个名为do.html的页面作为承载载入页面源代码的容器，并通过传递一个uri参数告知do.html需要载入的具体页面地址。

示例DEMO地址为http://mi.8866.org:2/management.aspx/，直接点击登录即可体验。

该页面加载了两个JavaScript文件。

 
<script type="text/javascript" src="/image/script.ashx/global.js?ver=1.0.0"></script>
<script type="text/javascript" src="/image/script.ashx/plus.js?ver=1.0.0"></script>

do.html页面的源代码如下：

 
<html>
<head>
<title>载入中...</title>
<script type="text/javascript" src="/image/script.ashx/do.js?ver=1.0"></script>
</head>
<body>
</body>
</html>

文件：do.js

 
document.write("<script src=\"/image/script.ashx/global.js?ver=1.0.0\"></script>");
document.write("<script src=\"/image/script.ashx/plus.js?ver=1.0.0\"></script>");
window.onload=function(){
j.plus.loadPage({uri:"/",time:1},{
start:function(){/*开始加载的回执函数*/},
over:function(){/*加载完成的回执函数*/}});
} 

loadPage函数定义与参数说明

loadPage函数的定义如下：

 
if(!typeof(window.j))window.j=new js();
j.plus=new plus();
function plus(){}
plus.prototype.loadPage=function(r,callback,e,times){
/* 
r 请求; r.time : 等待加载时间(毫秒);
callback :回执函数 (callback.start(),callback.over())
e.element 页面容器; */
if(!r.uri)alert('page uri parameters not be found!');
var aj=new ajax();
aj.request(r,{
start:function(){if(callback.start)callback.start();if(e)e.innerHTML='加载中..';else{document.body.innerHTML='加载中';}},
error:function(x){if(e)e.innerHTML='加载失败!';else document.body.innerHTML='加载失败';},
success:function(x){
var func=function(){if(callback.over)callback.over();if(e)e.innerHTML=x;else document.write(x);};
if(r.time){var t=new timer(r.time,func);t.start();}/*延迟显示*/
else func();
}}); 
} 
/*aj为ajax请求对象在global.js中定义
* timer为实现一个定时器的代码,在plus.js中有定义 */

实际调用与iframe动态生成

函数已经定义完成，我们在需要加载的地方添加代码：

文件：/management.aspx/

 
var bd=j.$("mainbody"); // mainbody为一个div容器
var uri="/do.html?uri=/management.aspx/"+uri;
bd.innerHTML="<iframe src='"+uri+"' frameborder='0' width='"+(j.x()-200)+"' height='100%' scrolling='no'></iframe>";

由于do.html会被缓存，因此在do.js中使用ajax将返回的html输出到do.html。

在线演示地址为http://demo.jb51.net/js/menu_iframe/index.htm