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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
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的开合式多级菜单程序
2006/10/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
深入Node TCP模块的理解
2019/03/13 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
js实现碰撞检测
2021/01/29 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
python一键升级所有pip package的方法
2017/01/16 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
简短证婚人证婚词
2014/01/09 职场文书
委托协议书范本
2014/04/22 职场文书
护士年终个人总结
2015/02/13 职场文书
企业百日安全活动总结
2015/05/07 职场文书
学习心得体会
2019/06/20 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL