頁面重載不必要的觸發綁定事件之前，爲了重新加載頁面

希望有人已經很好地回答了這一點：頁面重載不必要的觸發綁定事件之前，爲了重新加載頁面

爲什麼鉻（14.0）觸發的文件準備和窗口加載事件，當我刷新頁面？請注意，我不是在討論新頁面加載時發生的情況，而是在加載之前發生的情況。請看下面的代碼：

<form name="form1" method="post" action="tmp.aspx?a=1" id="form1"> 
<script type="text/javascript"> 

    $(document).ready(function() { console.log('document/ready' + new Date()); }); 

    $(window).load(function() { console.log('window/load' + new Date()); }); 

</script> 

<a href="tmp.aspx?a=1">tmp</a> 
</form>

當我第一次訪問頁面，我得到的控制檯兩個輸出，一個用於文件/準備和一個窗口/負載。當我刷新第二頁時，快速輸出更多內容，之後立即輸出兩頁（從新頁面查看）。如果我只是點擊直接返回到同一頁面的鏈接（tmp.aspx），則不會發生。

我相信對此有一個很好的解釋。

問候！

編輯：在頁面刷新之前，對$（document）.ready（）和$（window）.load（）進行額外的調用。所以當我第一次加載頁面時，他們的方法被調用一次，然後我點擊刷新，並在頁面重新加載之後再次調用這些方法。之後，當頁面剛剛被重新加載時，這些方法被稱爲第三時間。

來源

2011-08-26 Sten

它是一個iframe嗎？因爲我認爲我已經注意到相同的行爲，但像Facebook的 – Achshar

小工具也只是爲了消除變量，你可以嘗試這個沒有jQuery的？也許jquery是搞亂它..在純JavaScript中添加一個事件監聽器的身體。這應該縮小問題範圍。 – Achshar

我也有這個問題 - 太煩人了。我還發現散列更改事件導致document.ready不必要地觸發 – asgeo1

在14.0.835.202上觀察到的行爲。編輯:(在Windows 7 x64上）

這不是jquery的錯誤：DOMContentLoaded在頁面卸載前被再次觸發。

簡單測試來檢查：

function startpage() { 
    console.log('page loaded'); 
    } 

    function unloadPage(){ 
     console.log("page unloaded"); 
    } 
document.addEventListener("DOMContentLoaded", startpage, false); 
window.onbeforeunload = unloadPage;

刷新後，您將看到：

page loaded 
page loaded // should not be here and is not on Firefox. 
page unloaded 
loaded

在控制檯（具有持久性上）

我認爲這是簡單的Chrome錯誤。不是一個控制檯，因爲時間戳證明它不是重複的。

編輯：相同的Chrome版本，但運行OSX似乎好（見下面的評論）。它傾向於證實這是一個錯誤。

來源

2011-10-21 22:39:15 mddw

在'OSX 10.6.7'的'Chrome 14.0.835.202'上測試過，並且無法重新創建錯誤。日誌按預期讀取，'加載頁面;頁面卸載;'爲每個請求週期。 –

感謝您的輸入！所以OSX版本似乎確定。我沒有提到我的操作系統：我的測試是在Windows 7 x64上。當我有一些時間時，我將在Windows XP（x86）上運行測試。 – mddw

這個問題確實發生在OSX上 - 這就是我使用的 – asgeo1

據我所知，點擊#xxx鏈接（或鏈接到同一頁面，有或沒有#xxx）不會觸發window.load和document.ready事件。

如果您希望鏈接觸發一個事件，像做

$('a#xxx').click(function(){ 
    //Your code here 
}

其中xxx是鏈接的ID。

如果該鏈接是爲了重新加載頁面，在點擊事件處理程序使用

window.location.reload()

。

來源

2011-08-27 07:56:02 Wheatley

我不希望發生額外的呼叫。額外的電話是問題，我添加的鏈接只是爲了看看是否在鏈接點擊上發出了錯誤的電話。（他們不是） – Sten

在Chrome 13 for Mac中，我看不到這種行爲。第一次加載頁面後，在刷新之前，您是否清除了控制檯？是否有機會看到舊的控制檯輸出（我知道一些瀏覽器喜歡保持前一頁的控制檯輸出）？

我不希望這兩個事件在刷新時被觸發兩次，所以我的猜測可能是陳舊的控制檯，無論是通過設計，因爲它是手動刷新，或者也許Chrome 14的開發控制檯存在錯誤。

來源

2011-08-28 14:48:52 Nick

我只是做了一個額外的測試，以排除對控制檯輸出的誤解。我創建了一個包含在輸出中的隨機數，並且測試顯示前4個輸出是來自頁面的初始加載，然後是頁面重新加載之前（當我釋放刷新按鈕時）。所以這些方法在重新加載後離開頁面時被調用。 – Sten

我已經在Windows上對Chromium 14進行了測試。沒有觀察到行爲。

來源

2011-10-21 12:19:42

它看起來像一個chrome/webkit開發者控制檯bug。在Ubuntu上使用chrome 14，我可以通過執行下面的步驟來重現錯誤。

首先創建一個包含下面的js代碼

var timesLoaded = 0; 

function loadHandler() { 
    console.log(timesLoaded, "times loaded"); 
    timesLoaded++; 
} 

function unloadHandler(){ 
    console.log("unload after ", timesLoaded, " loads"); 
} 

$(document).ready(loadHandler); 
$(window).unload(unloadHandler);

打開谷歌瀏覽器的頁面
按F12打開控制檯，並參閱「加載時間」 0消息
添加頁面unloadHandler函數的第一行上的斷點
要看到雙重信息出現，您應該單擊頁面上某處（就像給焦點離開控制檯，並加載頁面）
刷新頁面
你可能會看到0「次裝」的消息再次

重要的是，你的代碼是不是執行兩次。只是由於某種原因，webkit dev控制檯再次顯示相同的消息。爲了進一步研究，你可以做以下的bug，

負載之前的HTML頁面
再次添加卸載斷點（只是要確定該網頁實際上不會刷新）
在控制檯上右擊第一項（「裝次」 0）
點擊檢查元件（是控制檯僅僅是一個HTML/JS應用）
找到條目屬於元素（它應該是一個div.console基團的消息元素
右擊元素，然後點擊中斷的子樹修改
刷新頁面（點擊某個HTML頁面上無焦點的控制檯窗口後再次
就在出現的第二個惱人消息調試器將顯示試圖附加消息的控制檯代碼。

來源

2011-10-25 20:19:59 vinilios

只是爲了在測試中添加一些註釋，使用chrome 15.0.874。102和Windows 7 86：

這是我用來測試從我這個問題的理解腳本：

<html> 
    <head> 
     <script language="javascript"> 
      var r = Math.floor(Math.random() * 101); 

      function reloadLink() { 
       console.log('----Reload Link----'); 
      } 

      function startpage() { 
       console.log('---Loaded. ID: ' + r + ' Time: '+new Date()); 
      } 

      function unloadPage() { 
       console.log('Un-loaded. ID: ' + r + ' Time: '+new Date()); 
      } 

      document.addEventListener("DOMContentLoaded", startpage, false); 
      window.onbeforeunload = unloadPage; 

     </script> 
     <title>Testing Chrome</title> 
    </head> 
    <body> 
     <a href="" onclick="reloadLink();">Reload Page</a> 
    </body> 
</html>

下面是一個累積的日誌，每個新加入以粗體突出顯示：

在初始頁面加載我得到：

---加載。 ID：68時間：週二2011年10月25日21時35分18秒GMT + 0100（GMT夏令時間）

按F5，而集中在HTML頁面上：

---加載。 ID：68時間：星期二2011年10月25日21時35分18秒GMT + 0100（GMT日光時間）
---加載。 ID：68時間：星期二2011年10月25日21時35分18秒GMT + 0100（GMT日光時間）< -----
未加載。 ID：68時間：星期二2011年10月25日21點36分12秒GMT + 0100（GMT日光時間）
---已加載。 ID：78時間：週二2011年10月25日21時36分十二秒GMT + 0100（GMT夏令時間）

按HTML頁面上的鏈接重新加載頁面：

---加載。 ID：68時間：星期二2011年10月25日21時35分18秒GMT + 0100（GMT日光時間）
---加載。 ID：68時間：星期二2011年10月25日21時35分18秒GMT + 0100（GMT日光時間）
未加載。 ID：68時間：星期二2011年10月25日21點36分12秒GMT + 0100（GMT日光時間）
---已加載。編號：78時間：星期二2011年10月25日21時36分12秒GMT + 0100（GMT日光時間）
----重新加載鏈接----
未加載。 ID：78時間：星期二2011年10月25日21時38分25秒GMT + 0100（GMT日光時間）
---加載。 ID：22時間：星期二2011年10月25日21時38分25秒GMT + 0100（GMT夏令時間）

按F5，而集中在控制檯上：

---加載。 ID：68時間：星期二2011年10月25日21時35分18秒GMT + 0100（GMT日光時間）
---加載。 ID：68時間：星期二2011年10月25日21時35分18秒GMT + 0100（GMT日光時間）
未加載。 ID：68時間：星期二2011年10月25日21點36分12秒GMT + 0100（GMT日光時間）
---已加載。 ID：78時間：星期二2011年10月25日21時36分12秒GMT + 0100（GMT日光時間）
----重新加載鏈接----
未加載。 ID：78時間：星期二2011年10月25日21時38分25秒GMT + 0100（GMT日光時間）
---加載。編號：22時間：星期二2011年10月25日21時38分25秒GMT + 0100（GMT日光時間）
未加載。編號：22時間：星期二2011年10月25日21時41分53秒GMT + 0100（GMT日光時間）
---加載。ID：15時間：週二2011年10月25日21時41分54秒GMT + 0100（GMT夏令時間）

正如你所看到的異常，只有當直接重裝的頁面時（我強調的異常帶箭頭），同時專注於頁面本身。
此外，如果您注意到ID和異常的時間戳，它們即使在等待幾秒鐘之後纔會碰到F5 - 因此它看起來代碼第二次沒有運行，可以這麼說，但控制檯是由於某種原因記錄副本。

增加進一步的結論：

如果選擇時間軸選項卡，並記錄兩者的初始頁面加載和F5重新加載，你會發現這兩個函數寫入到控制檯只運行一次，進一步複利它看起來像鉻合金控制檯上的一個可能的錯誤：

Screenshot Show Image - Timeline 1 (initial load) Show Image - Timeline 2 (F5 reload)