22

희망 누군가를 다시로드이에 좋은 답이있다 바운드 이벤트를 트리거? 새로운 페이지가로드 될 때 어떤 일이 발생했는지,로드되기 전에 어떤 일이 발생하는지에 대해서는 말하지 않습니다. 다음 코드를 참조하십시오.페이지를 다시로드 불필요 직전 페이지

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

페이지를 처음 방문하면 문서/준비 중 하나와 창 /로드 중 하나에 대한 두 개의 출력이 콘솔에 표시됩니다. 2 페이지를 새로 고침하면 더 빨리 출력되고, 그 다음 2 페이지가 새로 추가됩니다 (새 페이지보기에서). 만약 내가 대신 같은 페이지로 직접가는 링크 (tmp.aspx)를 클릭하면, 이것은 발생하지 않습니다.

나는 이것에 대한 좋은 설명이있을 것이라고 확신한다.

감사합니다.

EDIT : $ (document) .ready() 및 $ (window) .load()에 대한 추가 호출은 해당 페이지가 새로 고쳐지기 전에 수행됩니다. 그래서 처음 페이지를로드 할 때 메서드를 한 번 호출 한 다음 새로 고침을 클릭하고 페이지가 다시로드 된 메서드가 다시 호출됩니다. 그 후, 페이지가 다시로드되었을 때 메소드는 제 3의 시간이라고합니다.

+0

iframe입니까? coz 나는 같은 행동을 발견했지만 facebook의 – Achshar

+0

같은 위젯에 대해서도 변수를 없애기 위해 jquery없이 이것을 시도 할 수 있을까요? 어쩌면 jquery 그것으로 복잡합니다. 순수한 자바 스크립트에서 본문에 대한 이벤트 수신기를 추가하십시오. 문제 영역을 좁혀 야합니다. – Achshar

+0

나는이 문제를 너무 가지고있다 - 그래서 성가신. 또한 해시 변경 이벤트로 인해 document.ready가 불필요하게 실행됩니다. – asgeo1

답변

7

14.0.835.202에서 관찰 된 거동. 편집 : (Windows 7 x64)

jquery 오류가 아닙니다. 페이지 언로드 직전에 DOMContentLoaded가 실행됩니다.

간단한 테스트는이를 확인하기 : 나는 단순히 크롬 버그 생각 (에 지속성)

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

콘솔에서

을 :

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

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

당신은 새로 고침 후 볼 수 . 타임 스탬프가 복제본이 아니라는 것을 증명하는 콘솔 하나가 아닙니다.

편집 : 동일한 Chrome 버전이지만 OSX를 실행하는 것이 좋습니다 (아래 설명 참조). 버그라는 것을 확인하는 경향이 있습니다.

+1

'OSX 10.6.7'의'Chrome 14.0.835.202'에서 테스트했는데 버그를 다시 만들 수 없습니다. 로그는 예상대로 읽 힙니다. 페이지가 언로드 됨; 각 요청주기마다. –

+0

입력 해 주셔서 감사합니다! 그래서 OSX 버전은 괜찮은 것 같습니다. 내 운영체제에 대해서는 언급하지 않았다. 필자의 테스트는 Windows 7 x64에서였다. 나는 시간이있을 때 Windows XP (x86)에서 테스트를 실행합니다. – mddw

+1

문제는 OSX에서 발생합니다 - 그게 내가 사용하고있는 것입니다 – asgeo1

2

는 지금까지 내가 아는 한, (또는 #xxx없이 같은 페이지 또는 링크)를 #xxx 링크를 클릭하면 window.loaddocument.ready 이벤트를 트리거하지 않습니다. 당신이 이벤트를 트리거 링크를 원하는 경우

, xxx는 링크의 ID입니다

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

그런 짓을. 링크가 페이지를 다시로드 의미 경우

, 클릭 이벤트 처리기에

window.location.reload() 

를 사용합니다.

+0

여분의 전화가 걸리게하고 싶지 않습니다. 여분의 전화가 문제이며 내가 추가 한 링크는 지나친 전화가 링크 클릭에서도 발생했는지 확인하는 것이 었습니다. (그들은 그렇지 않습니다.) – Sten

3

Mac 용 Chrome 13에서이 문제가 보이지 않습니다. 페이지를 처음으로로드 한 다음 새로 고침을하기 전에 콘솔을 지우시겠습니까? 이전 콘솔 출력을 볼 기회가 있습니까? (일부 브라우저는 이전 페이지의 콘솔 출력을 계속 유지하려고합니다.)

새로 고침 할 때 두 이벤트가 두 번 실행되는 것을 기대하지 않으므로 수동 업데이트 또는 Chrome 14에서 개발자 콘솔에 버그가있어 내 의도가 부실 콘솔 일 수 있습니다.

+0

방금 ​​콘솔 출력에 대한 오해를 배제하기위한 추가 테스트를했습니다. 출력에 포함 된 임의의 숫자를 만들었고 첫 번째 4 개의 출력이 페이지의 초기로드에 있고 페이지가 다시로드되기 직전에 (새로 고침 버튼을 놓을 때) 테스트에 표시됩니다. 따라서 메소드는 재로드 후에 페이지를 떠날 때 호출됩니다. – Sten

2

Windows 용 Chromium 14에서이를 테스트했습니다. 행동은 관찰되지 않습니다.

2

크롬/웹킷 개발자 콘솔 버그 인 것 같습니다. 우분투에서 크롬 14를 사용하면 다음 단계에 따라 버그를 재현 할 수 있습니다.

먼저 메시지를 콘솔을 열고 0 "번로드"를 참조하기 위해 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. 열기 구글 크롬 페이지를
  2. 추가
  3. F12 키를 눌러 포함 된 페이지를 만들 unloadHandler 함수의 첫 번째 줄에 중단 점
  4. 더블 메시지을 보려면 페이지의 어딘가를 클릭해야합니다. 당신은 아마 볼 페이지
  5. 새로 고침
  6. (콘솔에서 그리고로드 페이지로 포커스를 같은) 0 메시지가 다시

중요한 것은 코드가 아닌 것을 "시간은로드" 두 번 실행. Webkit dev 콘솔이 어떤 이유로 든 동일한 메시지를 다시 표시합니다. 더 이전의 HTML 페이지

  • 다시 언로드 중단 점을 추가하려면 다음을 수행 할 수있는 버그,

    1. 로드를 조사하기 위해 콘솔에
    2. 을 마우스 오른쪽 버튼으로 클릭 (그냥 페이지가 실제로 새로 고침되지 않습니다해야합니다) 첫 번째 항목 (0 "번로드")
    3. 클릭 요소를 검사
    4. 항목이 속해있는 요소를 찾습니다 (그것이 div.console 그룹 메시지 있어야한다 (예 콘솔은 단지 HTML/JS 응용 프로그램입니다) 요소
    5. 오른쪽 다시 콘솔 창 없앱 에 HTML 페이지에 어딘가를 클릭 한 후 (페이지를 새로 고침 요소를 클릭하고 하위 트리 수정
    6. 브레이크 클릭 두 번째 성가신 메시지가 나타납니다 직전
    7. 디버거는 메시지를 추가하려고하는 콘솔 코드를 표시합니다.
  • 2

    크롬 15.0.874를 사용하여 테스트시 메모를 추가하기 만하면됩니다.(102)와 윈도우 7은 x86 :

    이것은 내가 질문에 대한 이해에서 테스트에 사용 된 스크립트입니다 : 다음

    <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초 (그리니치 표준시) + 0100 (GMT 일광 절약 시간) HTML 페이지에 집중하는 동안 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 그리니치 표준시 21시 36분 12초 + 0100 (GMT 일광 절약 시간)

  • 페이지를 다시로드하는 HTML 페이지의 링크를 누르면 10월 25일 화 . 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 시간 : Tue Oct 25 2011 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초 (그리니치 표준시) + 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 시간 : Tue Oct 25 2011 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 일광 절약 시간제)

    언로드. ID : 22 시간 : 2011 년 10 월 25 일 화요일 21:41:53 GMT + 0100 (GMT 일광 절약 시간제)
    ---로드 됨.ID : 15 시간 : 2011 10월 25일 화 그리니치 표준시 21시 41분 54초 + 0100 직접 페이지 를 다시로드 할 때 발생합니다 당신은 이상을 볼 수 있듯이

    (I는 화살표가 이상을 강조 (GMT 일광 절약 시간)), 페이지 자체에 중점을 두었습니다.

    또한 ID와 타임 스탬프를 모두 확인하면 F5를 누르기 전에 몇 초 기다린 후에도 동일하므로 코드가 다시 실행되지 않아 콘솔이 표시됩니다. 어떤 이유로 든 복사본 로깅. 결론에 더 추가


    : 콘솔에 기록 타임 라인 탭을 선택하고 초기 페이지로드 및 F5 다시로드를 모두 기록 할 경우

    , 당신은 두 가지 기능을 알 수는 있습니다

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

    : 그것의 Chromes 콘솔에 가능한 오류처럼 보이는 더 합성, 한 번 실행3210
    +0

    고마워요. 이 문제에 대한 다른 좋은 설명이 있었지만, 하나를 골라야하기 때문에 이것이 가장 상세한 설명이었습니다. 건배 – asgeo1

    관련 문제