奥博软件,为您提供专业的网站建设,软件开发,网络营销SEO,网络推广服务,代理国外主机空间,域名注册

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

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/  直接点登陆既可

( rsion.com,锐讯,巴中广州佛山成都网站建设,newmin,new.min,new.min@msn.com,newmin.net,巴中网站建设tel:18608275575锐讯)

该页面加载了两个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

示例DEMO:http://mi.8866.org:2/management.aspx/  直接点登陆既可  

( rsion.com,锐讯,巴中广州佛山成都网站建设,newmin,new.min,new.min@msn.com,newmin.net,巴中网站建设tel:18608275575锐讯)

 

附DEMO下载地址:http://mi.8866.org:2/web.aspx/

( rsion.com,锐讯,巴中广州佛山成都网站建设,newmin,new.min,new.min@msn.com,newmin.net,巴中网站建设tel:18608275575锐讯)  

DEMO为SharpDevelop+asp.net mvc创建,如果在VS中打不开直接用SharpDevelop应该就可以了

整站完成后再发完整的............

原创内容请您保留出处及地址, 我的网站: www.ops.cc 厦门装修公司
标签: Javascript
posted @ 2010-03-17 09:48 New.min 阅读(2288) 评论(14) 编辑 收藏

 回复 引用 查看   
#1楼 2010-03-17 10:15 高天乐      
网站菜单做的不错。
 回复 引用 查看   
#2楼 2010-03-17 14:04 duncannjm      
有点像是 EXTJS 做的!
 回复 引用 查看   
#3楼[楼主] 2010-03-17 14:21 New.min      
@duncannjm
为什么要extjs呢?我没用

 回复 引用 查看   
#4楼 2010-03-17 14:42 aito      
能不能提供DEMO的源码呢?
 回复 引用 查看   
#5楼[楼主] 2010-03-17 15:31 New.min      
@aito
留电子邮件我发你,但是我是用sharpdevelop开发的,,不知道
你能用不

 回复 引用 查看   
#6楼 2010-03-17 17:30 根号贰      
你让JQuery情何以堪?
 回复 引用 查看   
#7楼[楼主] 2010-03-18 09:14 New.min      
@根号贰
?

 回复 引用 查看   
#8楼 2010-03-18 09:25 RockyMan      
能不能发一份demo的源码给俺,myx8178633@163.com,多谢。。。
 回复 引用 查看   
#9楼[楼主] 2010-03-18 10:21 New.min      
@RockyMan
已发,请查收

 回复 引用 查看   
#10楼 2010-03-18 11:29 JDK      
能不能发一份demo的源码给俺,help_hostwork@yeah.net,多谢。。。
 回复 引用 查看   
#11楼[楼主] 2010-03-18 12:17 New.min      
@JDK
已经在上方给出下载地址,自行下载

 回复 引用 查看   
#12楼 2010-03-20 23:01 傻样精英      
博主提供的网站挂了?
 回复 引用 查看   
#13楼[楼主] 2010-03-22 09:03 New.min      
@傻样精英
您好,网站是架在我的电脑上的,现在访问就可以了

 回复 引用 查看   
#14楼 2010-03-26 09:43 gjcn      
发一份源码我好吗?
iori.guo@gmail.com
谢谢!