首頁 > 開發者 > JavaScript

JavaScript重新整理頁面特效代碼

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

在做web開發的時候有時候，一般都會用到。方法不止一種，看看你掌握了幾種？

重新整理頁面常用方法

history.go(0)    
location.reload()    
location=location    
location.assign(location)    
document.execCommand('Refresh')    
window.navigate(location)    
location.replace(location)    
document.URL=location.href

今天在項目中發現在chrome下重新整理頁面既然無效了,經過反覆測試發現是“#”字元阻止頁面重新整理
不理解？先來看下demo

 代碼如下 複製代碼

//javascript
$(function(){
 $('#reload').show('slow');
 $('#o1').click(function(){
  location = location
 })
 $('#o2').click(function(){
  history.go(0)
 })
 $('#o3').click(function(){
  location.reload()
 })
 $('#o4').click(function(){
  location = location
 })
 $('#o5').click(function(){
  history.go(0)
 })
 $('#o6').click(function(){
  location.reload()
 })
 $('#o7').click(function(){
  window.location = window.location
  return false
 })
 $('#o8').click(function(){
  history.go(0)
  return false
 })
 $('#o9').click(function(){
  location.reload()
  return false
 })
})
//html
<div id="reload">頁面重新整理了</div>
<a href="#" id="o1">樣本1</a>
<a href="#" id="o2">樣本2</a>
<a href="#" id="o3">樣本3</a>
<a href="javascript:;" id="o4">樣本4</a>
<a href="javascript:;" id="o5">樣本5</a>
<a href="javascript:;" id="o6">樣本6</a>
<a href="#" id="o7">樣本7</a>
<a href="#" id="o8">樣本8</a>
<a href="#" id="o9">樣本9</a>

測試結果

•firefox 所有樣本重新整理正常
•chrome 樣本2重新整理無效
•opera 所有樣本重新整理正常
•IE 所有樣本重新整理正常,樣本2會在地址欄增加“#”字元

這一次在地址欄增加“#”字元，再一次測試結果如下：

•firefox 樣本1、樣本4、樣本7重新整理無效，其餘重新整理正常
•chrome 樣本3、樣本6、樣本9重新整理正常，其餘重新整理無效
•opera 樣本1、樣本4、樣本7重新整理無效，其餘重新整理正常
•IE 樣本1、樣本4、樣本7重新整理無效，其餘重新整理正常

看來這一次是chrome耍個性了，在這裡設計蜂巢提醒大家注意以下兩點：

1.盡量少用“#”來作為空白連結,使用javascript:;等來代替。
2.只在適當的時候使用location.reload()重新整理頁面。因為該方法會強制清除緩衝，增加頁面載入的時間。


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

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

 代碼如下 複製代碼
<meta http-equiv="refresh" content="20">

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

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

 代碼如下 複製代碼
<meta http-equiv="refresh" content="20;url=http://www.111cn.net">

其中20指隔20秒後跳轉到http://www.111cn.net頁面

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

 代碼如下 複製代碼
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒重新整理一次
</script>

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

//如何重新整理包含該架構的頁面用

 代碼如下 複製代碼
<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>

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

 代碼如下 複製代碼

<body onload="opener.location.reload()"> 開窗時重新整理
<body onUnload="opener.location.reload()"> 關閉時重新整理

<script language="javascript">
window.opener.document.location.reload()
</script>

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

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript echo javascript encode javascript encodeuri
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

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