1. 程式人生 > >js實現重新整理iframe的方法彙總

js實現重新整理iframe的方法彙總

javascript實現重新整理iframe的方法的總結,現在假設存在下面這樣一個iframe,則重新整理該iframe的N種方法有:

複製程式碼 程式碼如下:
<iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe>

第一種方法:用iframe的name屬性定位

複製程式碼 程式碼如下:
<input type="button" name="Button" value="Button" onclick="document.frames('ifrmname').location.reload()">

或者

複製程式碼 程式碼如下:
<input type="button" name="Button" value="Button" onclick="document.all.ifrmname.document.location.reload()">

第二種方法:用iframe的id屬性定位

複製程式碼 程式碼如下:
<input type="button" name="Button" value="Button" onclick="ifrmid.window.location.reload()">

第三種方法:當iframe的src為其它網站地址(即跨域操作時)

複製程式碼
程式碼如下:
<input type="button" name="Button" value="Button" onclick="window.open(document.all.ifrmname.src,'ifrmname','')">

父頁面中存在兩個iframe,一個iframe中是一個連結列表,其中的連結指向另一個iframe,用於顯示內容。現在當內容內容新增後,在連結列表中添加了一條記錄,則需要重新整理列表iframe。
在內容iframe的提交js中使用parent.location.reload()將父頁面全部重新整理,因為另一個iframe沒有預設的url,只能通過列表選擇,所以只顯示了列表iframe的內容。
使用window.parent.frames["列表iframe名字"].location="列表url"即可進重新整理列表iframe,而內容iframe在提交後自己的重新整理將不受影響。

複製程式碼 程式碼如下:
document.frames("refreshAlarm").location.reload(true);
document.frames("refreshAlarm").document.location.reload(true);
document.frames("refreshAlarm").document.location="http://www.jb51.net/";
document.frames("refreshAlarm").src="http://www.jb51.net/";

注意區別:document.all.refreshAlarm 或 document.frames("refreshAlarm") 得到的是http://www.jb51.net/頁面中那個iframe標籤,所以對src屬性操作有用。
document.frames("refreshAlarm").document得到iframe裡面的內容,也就是"http://www.jb51.net/"中的內容。

reload 方法,該方法強迫瀏覽器重新整理當前頁面。

  語法:location.reload([bForceGet])

  引數: bForceGet, 可選引數, 預設為 false,從客戶端快取裡取當前頁。true, 則以 GET 方式,從服務端取最新的頁面, 相當於客戶端點選 F5("重新整理")

 程式碼如下
<script language="JavaScript">
window.location.reload();
</script>

  這樣就實現了頁面重新整理了,當然還有其它辦法了,那麼要重新整理框架頁面我們要如何操作

 程式碼如下

//方法1

document.getElementById('FrameID').contentWindow.location.reload(true);


//方法2
document.getElementById('youriframe').src=src;

  例項:

 程式碼如下
<iframe id="myframe" width="100%" frameBorder="0" src="test.html" scrolling="no"></iframe>
<input type="button" onclick="javascript:refreshFrame();" value="Refresh Frame" />
 
<script type="text/javascript">
<!--
function refreshFrame(){
    document.getElementById('myframe').contentWindow.location.reload(true);
}
//-->
</script>

  $('#iframe').attr('src', $('#iframe').attr('src'));

  三,如果是開啟的新頁面我們要重新整理的話可以使用如下程式碼來刷親

 程式碼如下
//重新整理包含該框架的頁面用   
<script language=JavaScript>
   parent.location.reload();
</script>
//子視窗重新整理父視窗
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">重新整理</a>   )
//重新整理另一個框架的頁面用   
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>

javascript(js)自動重新整理頁面的實現方法總結:

間隔10秒重新整理一次,在頁面的head標籤中加入下面的程式碼段:

複製程式碼 程式碼如下:
<meta http-equiv="refresh"content="10;url=跳轉的頁面或者是需要重新整理的頁面URL地址">

定時重新整理頁面(間隔2秒重新整理一下頁面):

複製程式碼 程式碼如下:
<script language="javascript">
setTimeout("location.href='url'",2000);//url是要重新整理的頁面URL地址
</script>

直接重新整理頁面事件:

複製程式碼 程式碼如下:
<script language="javascript">
window.location.reload(true);
//如需重新整理iframe,則只需把window替換為響應的iframe的name屬性值或ID屬性值
</script>

直接重新整理頁面事件:

複製程式碼 程式碼如下:
<script language=''javascript''>
window.navigate("本頁面url");
</script>

直接重新整理頁面事件:

複製程式碼 程式碼如下:
function abc(){
window.location.href="/blog/window.location.href";
setTimeout("abc()",10000);
}

重新整理框架頁:

複製程式碼 程式碼如下:
<script language="javascript">
top.leftFrm.location.reload();
parent.frmTop.location.reload();

</script>