javascript+iframe 實現無重新整理載入整頁的代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More