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


Posted in Javascript onMarch 17, 2010

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

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

File: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的定义如下:
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="<iframe src='"+uri+"' frameborder='0' width='"+(j.x()-200)+"' height='100%' scrolling='no'></iframe>";

由于do.html会被缓存,所以在do.js中用ajax将返回的html输出到do.html
在线演示地址 http://demo.3water.com/js/menu_iframe/index.htm
Javascript 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
js select常用操作控制代码
Mar 16 #Javascript
js实现的日期操作类DateTime函数代码
Mar 16 #Javascript
javascript json2 使用方法
Mar 16 #Javascript
jQuery 选择器理解
Mar 16 #Javascript
jQuery 学习入门篇附实例代码
Mar 16 #Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 #Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 #Javascript
You might like
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
jtable列中自定义button示例代码
2013/11/21 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
JS实现滑动插件
2020/01/15 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
关于旅游的活动方案
2014/08/15 职场文书
合作协议书范文
2014/08/20 职场文书
2014年协会工作总结
2014/11/22 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
写给女朋友的保证书
2015/05/09 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
git中cherry-pick命令的使用教程
2022/06/25 Servers