• 微软原版系统

  • 一键重装系统

  • 纯净系统

  • 在线技术客服

魔法猪系统重装大师 一键在线制作启动 U 盘 PE 系统 用一键重装的魔法拯救失去灵魂的系统
当前位置:首页 > 教程 > 电脑教程

利用iframe实现javascript无刷新载入整页

时间:2015年04月02日 15:47:30    来源:魔法猪系统重装大师官网    人气:3518

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文件

1

2

 

do.html的源代码为:

 



载入中...




File:do.js 1 document.write("");

2 document.write("");

3 window.onload=function(){

4 j.plus.loadPage({uri:"/",time:1},{

5 start:function(){/*开始加载的回执函数*/},

6 over:function(){/*加载完成的回执函数*/}});

7 }
loadPage的定义如下:
01 if(!typeof(window.j))window.j=new js();

02 j.plus=new plus();

03 function plus(){}

04

05 plus.prototype.loadPage=function(r,callback,e,times){

06 /*

07 r 请求; r.time : 等待加载时间(毫秒);

08 callback :回执函数 (callback.start(),callback.over())

09 e.element 页面容器; */

10 if(!r.uri)alert('page uri parameters not be found!');

11 var aj=new ajax();

12 aj.request(r,{

13 start:function(){if(callback.start)callback.start();if(e)e.innerHTML='加载中..';else{document.body.innerHTML='加载中';}},

14 error:function(x){if(e)e.innerHTML='加载失败!';else document.body.innerHTML='加载失败';},

15 success:function(x){

16 var func=function(){if(callback.over)callback.over();if(e)e.innerHTML=x;else document.write(x);};

17 if(r.time){var t=new timer(r.time,func);t.start();}/*延迟显示*/

18 else func();

19 }});

20 }

21

22 /*aj为ajax请求对象在global.js中定义

23 * timer为实现一个定时器的代码,在plus.js中有定义 */

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

 

File:/management.aspx/

1 var bd=j.$("mainbody"); // mainbody为一个div容器

2 var uri="/do.html?uri=/management.aspx/"+uri;

3 bd.innerHTML="";
1 由于do.html会被缓存,所以在do.js中用ajax将返回的html输出到do.html
 

利用,iframe,实现,javascript,无,刷新,载
栏目:电脑教程 阅读:1000 2023/12/27
Win7教程 更多>>
U盘教程 更多>>
Win10教程 更多>>
魔法猪学院 更多>>

Copyright © 2015-2023 魔法猪 魔法猪系统重装大师

本站发布的系统仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件。

在线客服 查看微信 返回顶部