javascript+iframe 实现无刷新载入整页的代码_javascript技巧-js教程-PHP中文网

javascript+iframe 实现无刷新载入整页的代码_javascript技巧

php中文网

发布： 2016-05-16 18:32:18

原创

1580人浏览过

jquery有一个load()方法,使用方法如:$("#div").load("/index.html");这样就可以将index.html加载到ID为div的容器中,
用iframe也可以实现,但没有上述做法完美,参见discuz那些网站,如登陆弹出一个层,也是载入的一个页面,但我发现状态栏左边出现的是正在打开about:blank,不知道是不是将iframe的src设为about:blank,然后在编辑iframe呢?但注意了，查看源代码的时候却看不到载入页面的时候是看不到载入的这个页面的源代码,不知道是不是才用了跟jquery一样分析head,然后将载入页面的头部信息添加到主页面的头部,然后用eval()函数执行javascript代码，，求解?
以下我用了一个页面做为承载载入页面源代码的容器,命名为do.html,传递一个参数uri告诉do.html要载入的页面!
示例DEMO:http://mi.8866.org:2/management.aspx/ 直接点登陆既可
该页面加载了两个js文件

达芬奇

达芬奇——你的AI创作大师

144

查看详情

复制代码代码如下:

do.html的源代码为:

复制代码代码如下:

载入中...

File:do.js

复制代码代码如下:

 
document.write(""); 
document.write(""); 
window.onload=function(){ 
j.plus.loadPage({uri:"/",time:1},{ 
start:function(){/*开始加载的回执函数*/}, 
over:function(){/*加载完成的回执函数*/}}); 
} 

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中有定义 */ 

函数已经定义完成,我们在需要加载的地方添加代码:
File:/management.aspx/

复制代码代码如下:

 
var bd=j.$("mainbody"); // mainbody为一个div容器 
var uri="/do.html?uri=/management.aspx/"+uri; 
bd.innerHTML=""; 

由于do.html会被缓存,所以在do.js中用ajax将返回的html输出到do.html
在线演示地址 http://demo.jb51.net/js/menu_iframe/index.htm

大家都在看：

JavaScript并发模型_事件循环任务调度三维图形渲染_javascriptWebGL应用 JavaScript工具库开发_Lodash源码分析 JavaScriptWASM集成_Rust与C++模块混编指南 JavaScript包管理_Npm与Yarn依赖管理