trang tải lại trong Chrome không cần thiết gây nên sự kiện ràng buộc ngay trước khi tải lại trang

Question

Hope ai đó đã một câu trả lời tốt như thế này:

Tại sao Chrome (14.0) gây nên các tài liệu sự kiện đã sẵn sàng và cửa sổ tải khi tôi làm mới trang? Lưu ý rằng tôi không nói về những gì sẽ xảy ra khi trang mới tải, nhưng trước khi tải xong. Xem mã sau:

<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> 

Khi tôi truy cập trang đầu tiên tôi nhận được hai kết quả đầu ra trên bảng điều khiển, một cho tài liệu/sẵn sàng và một cho cửa sổ/tải. Khi tôi làm mới trang, hai trang khác sẽ nhanh chóng xuất, và ngay sau đó hai trang nữa (từ trang xem mới). Nếu tôi thay vì chỉ cần nhấp vào liên kết (tmp.aspx) mà đi trực tiếp trở lại cùng một trang, điều này không xảy ra.

Tôi chắc chắn có giải thích tốt cho việc này.

Trân trọng!

EDIT: Các cuộc gọi bổ sung tới $ (tài liệu) .ready() và $ (cửa sổ) .load() được thực hiện TRƯỚC KHI trang đó đã được làm mới. Vì vậy, khi tôi lần đầu tiên tải trang họ phương thức được gọi một lần, sau đó tôi nhấn làm mới và TRƯỚC KHI trang đã tải lại các phương thức được gọi lại. Sau đó, khi trang vừa được tải lại, các phương thức được gọi là THIRD.

Answer 1

Hành vi được quan sát thấy trên 14.0.835.202. chỉnh sửa: (trên Windows Bảy x64)

Nó không phải là lỗi jquery: DOMContentLoaded được kích hoạt một lần khác ngay trước khi tải trang.

thử nghiệm đơn giản để kiểm tra điều này:

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

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

Bạn sẽ thấy sau khi làm mới:

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

Trong giao diện điều khiển của bạn (với sự bền bỉ trên)

Tôi nghĩ rằng nó chỉ đơn giản là một lỗi Chrome . Không phải bàn điều khiển, vì dấu thời gian chứng tỏ đó không phải là bản sao.

Chỉnh sửa: cùng phiên bản Chrome nhưng chạy OSX có vẻ ổn (xem nhận xét bên dưới). Nó có xu hướng xác nhận rằng đó là một lỗi.

Answer 2

Theo như tôi biết, hãy nhấp vào liên kết #xxx (hoặc liên kết đến cùng một trang, có hoặc không có #xxx) không kích hoạt các sự kiện window.load và document.ready.

Nếu bạn muốn liên kết để kích hoạt một sự kiện, làm điều gì đó như

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

nơi xxx là ID của liên kết.

Nếu liên kết đã có nghĩa là để tải lại trang, sử dụng

window.location.reload() 

trong xử lý sự kiện click.

Answer 3

Trong Chrome 13 dành cho Mac, tôi không thấy hành vi này. Sau khi bạn tải trang lần đầu tiên và trước khi bạn nhấn làm mới, bạn có xóa bảng điều khiển không? Có một cơ hội bạn đang nhìn thấy đầu ra giao diện điều khiển cũ (tôi biết một số trình duyệt muốn giữ đầu ra giao diện điều khiển của trang trước)? Tôi không mong đợi hai sự kiện này sẽ được kích hoạt hai lần khi làm mới, do đó, dự đoán của tôi sẽ là bảng điều khiển cũ, hoặc do thiết kế bởi vì đó là làm mới thủ công hoặc có lẽ Chrome 14 có lỗi với bảng điều khiển dành cho nhà phát triển của họ.

Answer 4

Tôi đã thử nghiệm tính năng này trên Chromium 14 trên Windows. Hành vi không được quan sát.

Answer 5

Dường như lỗi bảng điều khiển dành cho nhà phát triển Chrome/webkit. Sử dụng chrome 14 trên Ubuntu tôi có thể tạo lại lỗi bằng cách làm theo các bước tiếp theo.

Đầu tiên tạo một trang có chứa đoạn mã sau 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); 

1. Mở trang với google chrome
2. Nhấn F12 để mở giao diện điều khiển và xem 0 "lần nạp" thông điệp
3. Add điểm ngắt trên dòng đầu tiên của hàm unloadHandler
4. Để xem thông báo kép xuất hiện, bạn nên nhấp vào một nơi nào đó trên trang (Như đưa ra tập trung ra khỏi giao diện điều khiển và đến trang tải)
5. Làm mới trang
6. Có thể bạn sẽ thấy 0 "lần nạp" tin nhắn một lần nữa

Điều quan trọng là mã của bạn không phải là thực hiện hai lần. Chỉ vì một số lý do mà giao diện điều khiển webkit dev hiển thị cùng một thông điệp một lần nữa. Tiếp tục điều tra lỗi bạn có thể làm những điều sau đây,

1. tải trang html trước
2. Thêm breakpoint dỡ bỏ một lần nữa (chỉ để đảm bảo trang web sẽ không thực sự làm mới)
3. Nhấp chuột phải vào giao diện điều khiển nhập đầu tiên (0 "lần nạp")
4. Bấm kiểm tra nguyên tố (có giao diện điều khiển chỉ là một html/js ứng dụng)
5. Xác định vị trí các phần tử entry thuộc về (nó phải là một div.console-nhóm nhắn phần tử
6. Nhấp chuột phải vào phần tử và click vào Nghỉ giải lao trên Subtree Modifications
7. Làm mới trang (một lần nữa sau khi nhấp vào nơi nào đó trên trang html để Không tập trung console cửa sổ
8. Ngay trước khi thứ hai gây phiền nhiễu thông báo xuất hiện các trình gỡ rối sẽ hiển thị cho mã giao diện điều khiển cố gắng nối thêm thông báo.

Answer 6

Chỉ cần thêm một số ghi chú khi thử nghiệm, sử dụng chrome 15.0.874.102 và windows 7 x86:

Đây là kịch bản tôi đã sử dụng để thử nghiệm từ sự hiểu biết của tôi về câu hỏi:

<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> 

Sau đây là một bản ghi tích lũy, mỗi bổ sung mới in đậm:

Khi tải trang ban đầu, tôi nhận được:

--- Đã tải. ID: 68 Thời gian: Tue 25 Tháng 10 2011 21:35:18 GMT + 0100 (GMT Daylight Time)

Nhấn F5 trong khi tập trung vào các trang HTML:

--- Loaded. ID: 68 Thời gian: Thứ Ba 25 Tháng 10 2011 21:35:18 GMT + 0100 (GMT Giờ ban ngày)
--- Đã tải. ID: 68 Thời gian: Tue Oct 25 2011 21:35:18 GMT + 0100 (GMT Daylight Time) < -----
Un-loaded. ID: 68 Thời gian: Tue Oct 25 2011 21:36:12 GMT + 0100 (GMT Daylight Time)
--- Đã tải. ID: 78 Thời gian: Tue 25 Tháng 10 2011 21:36:12 GMT + 0100 (GMT Daylight Time)

Nhấn vào liên kết trên trang HTML để tải lại trang:

--- Loaded . ID: 68 Thời gian: Tue Oct 25 2011 21:35:18 GMT + 0100 (GMT Daylight Time)
--- Đã tải. ID: 68 Thời gian: Tue Oct 25 2011 21:35:18 GMT + 0100 (GMT Daylight Time)
Chưa tải. ID: 68 Thời gian: Tue Oct 25 2011 21:36:12 GMT + 0100 (GMT Daylight Time)
--- Đã tải. ID: 78 Thời gian: Thứ Ba 25 Tháng 10 2011 21:36:12 GMT + 0100 (GMT Daylight Time)
---- Tải lại liên kết ----
Un-loaded. ID: 78 Thời gian: Thứ Ba 25 Tháng 10 2011 21:38:25 GMT + 0100 (GMT Daylight Time)
--- Đã tải. ID: 22 Thời gian: Tue 25 Tháng 10 2011 21:38:25 GMT + 0100 (GMT Daylight Time)

Nhấn F5 trong khi tập trung vào giao diện điều khiển:

--- Loaded. ID: 68 Thời gian: Tue Oct 25 2011 21:35:18 GMT + 0100 (GMT Daylight Time)
--- Đã tải. ID: 68 Thời gian: Tue Oct 25 2011 21:35:18 GMT + 0100 (GMT Daylight Time)
Chưa tải. ID: 68 Thời gian: Tue Oct 25 2011 21:36:12 GMT + 0100 (GMT Daylight Time)
--- Đã tải. ID: 78 Thời gian: Thứ Ba 25 Tháng 10 2011 21:36:12 GMT + 0100 (GMT Daylight Time)
---- Tải lại liên kết ----
Un-loaded. ID: 78 Thời gian: Thứ Ba 25 Tháng 10 2011 21:38:25 GMT + 0100 (GMT Daylight Time)
--- Đã tải. ID: 22 Thời gian: Thứ Ba ngày 25 tháng 10 năm 2011 21:38:25 GMT + 0100 (GMT Giờ ban ngày)
Chưa tải. ID: 22 Thời gian: Tue Oct 25 2011 21:41:53 GMT + 0100 (GMT Daylight Time)
--- Đã tải.ID: 15 Thời gian: Thứ Ba 25 Tháng 10 2011 21:41:54 GMT + 0100 (GMT Daylight Time)

Như bạn có thể thấy sự bất thường chỉ xảy ra khi tải lại trực tiếp trang (Tôi đã đánh dấu sự bất thường với mũi tên), trong khi tập trung vào chính trang đó.
Ngoài ra, nếu bạn nhận thấy cả ID và dấu thời gian của bất thường, chúng đều giống nhau ngay cả sau khi đợi vài giây trước khi nhấn F5 - vì vậy có vẻ như mã không chạy trong lần thứ hai để nói, nhưng bàn điều khiển ghi lại một bản sao vì một lý do nào đó.

---

Thêm nữa đến kết luận:

Nếu bạn chọn tab timeline, và ghi lại cả một tải trang ban đầu, và một tải lại F5, bạn sẽ thấy hai chức năng ghi vào giao diện điều khiển chỉ chạy một lần, hơn nữa làm trầm nó trông giống như một lỗi có thể trên Chromes console:

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