快捷導(dǎo)航

javascript+iframe 實(shí)現(xiàn)無(wú)刷新載入整頁(yè)的代碼

更新時(shí)間：2010年03月17日 13:58:01 作者：

用iframe也可以實(shí)現(xiàn),但沒有上述做法完美,參見discuz那些網(wǎng)站,如登陸彈出一個(gè)層,也是載入的一個(gè)頁(yè)面,但我發(fā)現(xiàn)狀態(tài)欄左邊出現(xiàn)的是正在打開about:blank

jquery有一個(gè)load()方法,使用方法如:$("#div").load("/index.html");這樣就可以將index.html加載到ID為div的容器中,
用iframe也可以實(shí)現(xiàn),但沒有上述做法完美,參見discuz那些網(wǎng)站,如登陸彈出一個(gè)層,也是載入的一個(gè)頁(yè)面,但我發(fā)現(xiàn)狀態(tài)欄左邊出現(xiàn)的是正在打開about:blank,不知道是不是將iframe的src設(shè)為about:blank,然后在編輯iframe呢?但注意了，查看源代碼的時(shí)候卻看不到載入頁(yè)面的時(shí)候是看不到載入的這個(gè)頁(yè)面的源代碼,不知道是不是才用了跟jquery一樣分析head,然后將載入頁(yè)面的頭部信息添加到主頁(yè)面的頭部,然后用eval()函數(shù)執(zhí)行javascript代碼，，求解?
以下我用了一個(gè)頁(yè)面做為承載載入頁(yè)面源代碼的容器,命名為do.html,傳遞一個(gè)參數(shù)uri告訴do.html要載入的頁(yè)面!
示例DEMO:http://mi.8866.org:2/management.aspx/ 直接點(diǎn)登陸既可
該頁(yè)面加載了兩個(gè)js文件

復(fù)制代碼代碼如下:

 
<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的源代碼為:

復(fù)制代碼代碼如下:

 
<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

復(fù)制代碼代碼如下:

 
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(){/*開始加載的回執(zhí)函數(shù)*/}, 
over:function(){/*加載完成的回執(zhí)函數(shù)*/}}); 
} 

loadPage的定義如下:

復(fù)制代碼代碼如下:

 
if(!typeof(window.j))window.j=new js(); 
j.plus=new plus(); 
function plus(){} 
plus.prototype.loadPage=function(r,callback,e,times){ 
/* 
r 請(qǐng)求; r.time : 等待加載時(shí)間(毫秒); 
callback :回執(zhí)函數(shù) (callback.start(),callback.over()) 
e.element 頁(yè)面容器; */ 
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請(qǐng)求對(duì)象在global.js中定義 
* timer為實(shí)現(xiàn)一個(gè)定時(shí)器的代碼,在plus.js中有定義 */ 

函數(shù)已經(jīng)定義完成,我們?cè)谛枰虞d的地方添加代碼:
File:/management.aspx/

復(fù)制代碼代碼如下:

 
var bd=j.$("mainbody"); // mainbody為一個(gè)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會(huì)被緩存,所以在do.js中用ajax將返回的html輸出到do.html
在線演示地址 http://demo.jb51.net/js/menu_iframe/index.htm

您可能感興趣的文章: