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

所属分类: 网络编程 / JavaScript 阅读数: 893
收藏 0 赞 0 分享
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.jb51.net/js/menu_iframe/index.htm
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多