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中实现trim()函数的两种方法
Feb 04 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 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中转义mysql语句的实现代码
2011/06/24 PHP
php文件上传简单实现方法
2015/01/24 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
js模拟微博发布消息
2017/02/23 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Python Requests 基础入门
2016/04/07 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
django创建css文件夹的具体方法
2020/07/31 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
应届毕业生应聘自荐信范文
2014/02/26 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA