모든 주요 브라우저 (IE 제외) onload의 경우 뒤로 버튼 작업의 결과로 페이지가로드 될 때 JavaScript 이벤트가 시작되지 않으며 페이지가 처음로드 될 때만 실행됩니다.
누군가이 문제를 해결하는 샘플 크로스 브라우저 코드 (Firefox, Opera, Safari, IE 등)를 알려 줄 수 있습니까? 나는 Firefox의 pageshow이벤트에 익숙 하지만 불행히도 Opera 나 Safari는 이것을 구현하지 않습니다.
답변
여러분, JQuery에는 한 가지 효과 만 있습니다. 뒤로 버튼을 누르면 페이지가 다시로드됩니다. 이것은 ” 준비 ” 와 관련이 없습니다 .
어떻게 작동합니까? JQuery는 onunload 이벤트 리스너를 추가합니다 .
// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...기본적으로 아무 것도 수행하지 않습니다. 그러나 어떻게 든 이벤트 핸들러에 포함되어 있든 Safari, Opera 및 Mozilla에서 다시로드를 트리거하는 것처럼 보입니다.
[ edit (Nickolay) : 다음과 같이 작동합니다 : webkit.org , developer.mozilla.org . 그 제품 (이하 별도의 대답에 내 요약)를 읽고 여부를 고려하시기 바랍니다 정말 이 작업을 수행하고 사용자에게 느린 페이지로드를 확인해야합니다.]
믿을 수 없습니까? 이 시도:
<body onunload=""><!-- This does the trick -->
<script type="text/javascript">
alert('first load / reload');
window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>JQuery를 사용할 때 비슷한 결과가 나타납니다.
onunload 없이 이것과 비교하고 싶을 수도 있습니다.
<body><!-- Will not reload on back button -->
<script type="text/javascript">
alert('first load / reload');
window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>답변
일부 최신 브라우저 (Firefox, Safari 및 Opera (Chrome은 아님))는 사용자가 뒤로 탐색 할 때 포함되는 특수한 “뒤로 / 앞으로”캐시 (모질라가 개발 한 용어 인 bfcache라고 함)를 지원합니다. 일반 (HTTP) 캐시와 달리 페이지의 전체 상태 (JS, DOM 상태 포함)를 캡처합니다. 이를 통해 사용자가 페이지를 더 정확하게 페이지를 다시로드 할 수 있습니다.
그만큼 load페이지가이 bfcache에서로드 될 때 이벤트는 화재되어 있지 않습니다. 예를 들어, “load”핸들러에서 UI를 작성하고 “load”이벤트가 초기로드시 한 번 발생하고 두 번째로 bfcache에서 페이지가 다시로드되면 페이지가 종료됩니다. UI 요소를 복제합니다.
이것이 “언로드”핸들러를 추가하면 페이지가 bfcache에 저장되는 것을 막는 이유입니다 (따라서 탐색 속도가 느려짐). 언로드 핸들러가 정리 작업을 수행하여 페이지를 실행 불가능한 상태로 유지할 수 있습니다.
언제 탐색 / 이동하는지 알 필요가있는 페이지의 경우, Firefox 1.5 이상 및 Safari 28758 수정 버전의 Safari 버전은 “pageshow”및 “pagehide”라는 특수 이벤트를 지원합니다.
참고 문헌 :
답변
사용자가 뒤로 또는 앞으로 클릭했을 때 js가 실행되지 않는 문제가 발생했습니다. 먼저 브라우저 캐싱을 중지하기로 설정했지만 이것이 문제가되지는 않았습니다. 모든 라이브러리 등이로드 된 후 내 자바 스크립트가 실행되도록 설정되었습니다. readyStateChange 이벤트로 확인했습니다.
일부 테스트 후 뒤로 클릭 한 페이지에서 요소의 readyState가 ‘로드’되지 않고 ‘완료’인 것을 알았습니다. || element.readyState == 'complete'조건문에 추가하면 문제가 해결되었습니다.
내가 찾은 결과를 공유하겠다고 생각했는데 다른 사람들을 도울 수 있기를 바랍니다.
완전성을 위해 편집
내 코드는 다음과 같습니다.
script.onreadystatechange(function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
// call code to execute here.
}
});위의 코드 샘플에서 스크립트 변수는 DOM에 추가 된 새로 작성된 스크립트 요소입니다.
답변
여기, ckramer의 초기 솔루션과 Opera를 포함한 모든 브라우저에서 작동하는 palehorse의 예를 기반으로 한 최종 솔루션이 있습니다. history.navigationMode를 ‘compatible’로 설정하면 jQuery의 ready 함수는 Opera와 다른 주요 브라우저에서 뒤로 버튼 조작시 실행됩니다.
이 페이지에는 자세한 정보가 있습니다.
예:
history.navigationMode = 'compatible';
$(document).ready(function(){
alert('test');
});나는 이것을 Opera 9.5, IE7, FF3 및 Safari에서 테스트했으며 모두 작동합니다.
답변
위의 예제를 작동시킬 수 없었습니다. 뒤로 버튼을 통해 페이지로 돌아올 때 수정 된 특정 div 영역을 새로 고치기를 원했습니다. 내가 사용한 트릭은 div 영역이 원래 영역에서 변경 되 자마자 숨겨진 입력 필드 ( “더티 비트”라고 함)를 1로 설정하는 것입니다. 숨겨진 입력 필드는 실제로 다시 클릭 할 때 해당 값을 유지하므로 onload 에서이 비트를 확인할 수 있습니다. 설정되면 페이지를 새로 고칩니다 (또는 div를 새로 고칩니다). 그러나 원래로드에서는 비트가 설정되지 않으므로 페이지를 두 번로드하는 데 시간을 낭비하지 않습니다.
<input type='hidden' id='dirty'>
<script>
$(document).ready(function() {
if ($('#dirty').val()) {
// ... reload the page or specific divs only
}
// when something modifies a div that needs to be refreshed, set dirty=1
$('#dirty').val('1');
});
</script>뒤로 버튼을 클릭 할 때마다 올바르게 트리거됩니다.
답변
올바르게 기억한다면 unload () 이벤트를 추가하면 페이지를 캐시 할 수 없다는 것을 의미합니다 (앞으로 / 뒤로 캐시로). 사용자가 멀리 이동할 때 상태가 변경되거나 변경 될 수 있기 때문입니다. 따라서 기록 개체를 탐색하여 페이지로 돌아올 때 페이지의 마지막 초 상태를 복원하는 것은 안전하지 않습니다.
답변
“뒤로”를 칠 때 이벤트 발생에 대해 이야기하지 않았기 때문에 이것이 페이지로드가 아닌 “onunload”에 대한 것이라고 생각 했습니까? $ document.ready ()는 페이지로 이동하는 방법에 관계없이 페이지로드시 원하는 이벤트를위한 것입니다 (예 : 리디렉션, 브라우저를 URL로 직접 여는 등). 이전 페이지가 다시로드 될 때 실행되는 정보 그리고 $ document.ready ()가 포함되어 있어도 Javascript가 여전히 있다는 것을 알았으므로 페이지가 캐시되지 않는지 확실하지 않습니다. 우리는 스크립트를 수정할 때마다이 이벤트가있는 스크립트를 편집 할 때 Ctrl + F5를 눌러야하고 페이지에서 결과를 테스트하려고합니다.
$(window).unload(function(){ alert('do unload stuff here'); }); “뒤로”를 누르고 현재 페이지를 언로드 할 때 onunload 이벤트에 대해 원하는 것이며, 사용자가 브라우저 창을 닫을 때도 실행됩니다. 이것은 $ document.ready () 응답으로 수를 초과하더라도 원하는 것 같습니다. 기본적으로 현재 페이지가 닫히는 동안 발생하는 이벤트 발생 또는로드 될 때 “뒤로”를 클릭 할 때로드되는 이벤트 발생의 차이점이 있습니다. IE 7에서 잘 테스트되었으므로 다른 브라우저는 우리가있는 곳에서 허용되지 않으므로 말할 수 없습니다. 그러나 이것은 다른 옵션 일 수 있습니다.
