首頁 > 開發者 > JavaScript

JavaScript重新整理架構及頁面的方法總集

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

聲明：

最近越來越感覺JS的優越性，項目中用到關於架構頁面重新整理的方法，在網上搜尋以後發現有許多不錯的代碼，但不是很齊全。於是，我索性從網路上搜集以後經過精心編排，整理了一下。^ - ^ 希望大家多多指教！

先來看一個簡單的例子

下面以三個頁面分別命名為frame.html、top.html、bottom.html為例來具體說明如何做。 

frame.html 由上(top.html)下(bottom.html)兩個頁面組成，代碼如下：

 
    
  
  1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >   
    2. 
  
  2.  < HTML >   
    3. 
  
  3.  < HEAD >   
    4. 
  
  4.  < TITLE >  frame  </ TITLE >   
    5. 
  
  5.  </ HEAD >    
    6. 
  
  6.  < frameset  rows ="50%,50%" >   
    7. 
  
  7.  < frame  name =top  src ="top.html" >   
    8. 
  
  8.  < frame  name =bottom  src ="bottom.html" >   
    9. 
  
  9.  </ frameset >   
    10. 
  
  10.  </ HTML >&nbsp; 
    11.

現在假設top.html (即上面的頁面) 有七個button來實現對bottom.html (即下面的頁面) 的重新整理，可以用以下七種語句，哪個好用自己看著辦了。

語句1. window.parent.frames[1].location.reload();

語句2. window.parent.frames.bottom.location.reload();

語句3. window.parent.frames["bottom"].location.reload();

語句4. window.parent.frames.item(1).location.reload();

語句5. window.parent.frames.item('bottom').location.reload();

語句6. window.parent.bottom.location.reload();

語句7. window.parent['bottom'].location.reload();

top.html 頁面的代碼如下：

 
    
  
  1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >   
    2. 
  
  2.  < HTML >   
    3. 
  
  3.    < HEAD >   
    4. 
  
  4.     < TITLE >  top.html  </ TITLE >   
    5. 
  
  5.    </ HEAD >   
    6. 
  
  6.  < BODY >   
    7. 
  
  7.  < input  type =button  value ="重新整理1"  onclick ="window.parent.frames[1].location.reload()" >< br >   
    8. 
  
  8.  < input  type =button  value ="重新整理2"  onclick ="window.parent.frames.bottom.location.reload()" >< br >   
    9. 
  
  9.  < input  type =button  value ="重新整理3"  onclick ="window.parent.frames['bottom'].location.reload()" >< br >   
    10. 
  
  10.  < input  type =button  value ="重新整理4"  onclick ="window.parent.frames.item(1).location.reload()" >< br >   
    11. 
  
  11.  < input  type =button  value ="重新整理5"  onclick ="window.parent.frames.item('bottom').location.reload()" >< br >   
    12. 
  
  12.  < input  type =button  value ="重新整理6"  onclick ="window.parent.bottom.location.reload()" >< br >   
    13. 
  
  13.  < input  type =button  value ="重新整理7"  onclick ="window.parent['bottom'].location.reload()" >< br >   
    14. 
  
  14.  </ BODY >   
    15. 
  
  15.  </ HTML > 
    16.

下面是bottom.html頁面原始碼，為了證明下方頁面的確被重新整理了，在裝載完頁面彈出一個對話方塊。

bottom.html 頁面的代碼如下：

 
    
  
  1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >   
    2. 
  
  2.  < HTML >   
    3. 
  
  3.    < HEAD >   
    4. 
  
  4.     < TITLE >  bottom.html  </ TITLE >   
    5. 
  
  5.    </ HEAD >   
    6. 
  
  6.  < BODY  onload ="alert('我被載入了！')" >   
    7. 
  
  7.  < h1 > This is the content in bottom.html. </ h1 >   
    8. 
  
  8.  </ BODY >   
    9. 
  
  9.  </ HTML > 
    10.

解釋一下：

1.window指代的是當前頁面，例如對於此例它指的是top.html頁面。

2.parent指的是當前頁面的父頁面，也就是包含它的架構頁面。例如對於此例它指的是framedemo.html。

3.frames是window對象，是一個數組。代表著該架構內所有子頁面。

4.item是方法。返回數組裡面的元素。

5.如果子頁面也是個架構頁面，裡面還是其它的子頁面，那麼上面的有些方法可能不行。

附：

Javascript重新整理頁面的幾種方法： 

1   history.go(0) 

2   location.reload() 

3   location=location 

4   location.assign(location) 

5   document.execCommand('Refresh') 

6   window.navigate(location) 

7   location.replace(location) 

8   document.URL=location.href 

自動重新整理頁面的方法:

1.頁面自動重新整理：把如下代碼加入<head>地區中

 
    
  
  1. <meta http-equiv="refresh" content="20">     
    2.

其中20指每隔20秒重新整理一次頁面.

2.頁面自動跳轉：把如下代碼加入<head>地區中

 
    
  
  1. <meta http-equiv="refresh" content="20;url=http://www.wyxg.com">     
    2.

其中20指隔20秒後跳轉到http://www.wyxg.com頁面

3.頁面自動重新整理js版

 
    
  
  1. <script language="JavaScript">  
    2. 
  
  2.  function myrefresh()  
    3. 
  
  3.  {  
    4. 
  
  4.       window.location.reload();  
    5. 
  
  5.  }  
    6. 
  
  6.  setTimeout('myrefresh()',1000); //指定1秒重新整理一次  
    7. 
  
  7. </script>&nbsp; 
    8.

ASP.NET如何輸出重新整理父視窗指令碼語句

1.  this.response.write("<script>opener.location.reload();</script>"); 

2.  this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");  

3.  Response.Write("<script language=javascript>opener.window.navigate(''你要重新整理的頁.asp'');</script>")

JS重新整理架構的指令碼語句

 
    
  
  1. //如何重新整理包含該架構的頁面用     
    2. 
  
  2. <script language=JavaScript>  
    3. 
  
  3.   parent.location.reload();  
    4. 
  
  4. </script>     
    5. 
  
  5. //子視窗重新整理父視窗  
    6. 
  
  6. <script language=JavaScript>  
    7. 
  
  7.    self.opener.location.reload();  
    8. 
  
  8. </script>   
    9. 
  
  9. (　或　<a href="javascript:opener.location.reload()"> 重新整理 </a>   )  
    10. 
  
  10.  
    11. 
  
  11. //如何重新整理另一個架構的頁面用     
    12. 
  
  12. <script language=JavaScript>  
    13. 
  
  13.   parent.另一FrameID.location.reload();  
    14. 
  
  14. </script> &nbsp; 
    15.

如果想關閉視窗時重新整理或者想開窗時重新整理的話，在 <body> 中調用以下語句即可。 

 
    
  
  1. <body onload="opener.location.reload()"> 開窗時重新整理   
    2. 
  
  2. <body onUnload="opener.location.reload()"> 關閉時重新整理   
    3. 
  
  3. <script language="javascript">  
    4. 
  
  4. window.opener.document.location.reload()  
    5. 
  
  5. </script> 
    6.

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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