西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)javascript|JQuery → 利用iframe實現(xiàn)javascript無刷新載入整頁

利用iframe實現(xiàn)javascript無刷新載入整頁

相關(guān)軟件相關(guān)文章發(fā)表評論 來源:newmin時間:2010/3/17 11:46:51字體大小:A-A+

作者:劉銘點擊:1277次評論:0次標(biāo)簽: iframe

華碩MultiFrame軟件v1.0.22 官方安裝版
  • 類型:系統(tǒng)其它大。3.0M語言:中文 評分:5.0
  • 標(biāo)簽:
立即下載

jquery有一個load()方法,使用方法如:$("#div").load("/index.html");這樣就可以將index.html加載到ID為div的容器中,

 

用iframe也可以實現(xiàn),但沒有上述做法完美,參見discuz那些網(wǎng)站,如登陸彈出一個層,也是載入的一個頁面,但我發(fā)現(xiàn)狀態(tài)欄左邊出現(xiàn)的是 正在打開about:blank,不知道是不是將iframe的src設(shè)為about:blank,然后在編輯iframe呢?但注意了,查看源代碼的時候卻看不到載入頁面的時候是看不到載入的這個頁面的源代碼,不知道是不是才用了跟jquery一樣分析head,然后將載入頁面的頭部信息添加到主頁面的頭部,然后用eval()函數(shù)執(zhí)行javascript代碼,,求解?

 

以下我用了一個頁面做為承載載入頁面源代碼的容器,命名為do.html,傳遞一個參數(shù)uri告訴do.html要載入的頁面!

 

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

 

該頁面加載了兩個js文件

1 <script type="text/javascript" src="/image/script.ashx/global.js?ver=1.0.0"></script>

2 <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 1 document.write("<script src=\"/image/script.ashx/global.js?ver=1.0.0\"></script>");

2 document.write("<script src=\"/image/script.ashx/plus.js?ver=1.0.0\"></script>");

3 window.onload=function(){

4 j.plus.loadPage({uri:"/",time:1},{

5 start:function(){/*開始加載的回執(zhí)函數(shù)*/},

6 over:function(){/*加載完成的回執(zhí)函數(shù)*/}});

7 }
loadPage的定義如下:
01 if(!typeof(window.j))window.j=new js();

02 j.plus=new plus();

03 function plus(){}

04

05 plus.prototype.loadPage=function(r,callback,e,times){

06 /*

07 r 請求; r.time : 等待加載時間(毫秒);

08 callback :回執(zhí)函數(shù) (callback.start(),callback.over())

09 e.element 頁面容器; */

10 if(!r.uri)alert('page uri parameters not be found!');

11 var aj=new ajax();

12 aj.request(r,{

13 start:function(){if(callback.start)callback.start();if(e)e.innerHTML='加載中..';else{document.body.innerHTML='加載中';}},

14 error:function(x){if(e)e.innerHTML='加載失敗!';else document.body.innerHTML='加載失敗';},

15 success:function(x){

16 var func=function(){if(callback.over)callback.over();if(e)e.innerHTML=x;else document.write(x);};

17 if(r.time){var t=new timer(r.time,func);t.start();}/*延遲顯示*/

18 else func();

19 }});

20 }

21

22 /*aj為ajax請求對象在global.js中定義

23 * timer為實現(xiàn)一個定時器的代碼,在plus.js中有定義 */

函數(shù)已經(jīng)定義完成,我們在需要加載的地方添加代碼:

 

File:/management.aspx/

1 var bd=j.$("mainbody"); // mainbody為一個div容器

2 var uri="/do.html?uri=/management.aspx/"+uri;

3 bd.innerHTML="<iframe src='"+uri+"' frameborder='0' width='"+(j.x()-200)+"' height='100%' scrolling='no'></iframe>";
1 由于do.html會被緩存,所以在do.js中用ajax將返回的html輸出到do.html
 

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)