뒤로 버튼을 클릭하면 크로스 브라우저 온로드 이벤트가 발생합니까?
브라우저에 자바스크립트 (JavaScript)onload이벤트는 페이지를 로드할 때 뒤로 단추 작업으로 인해 발생하지 않습니다. 페이지가 처음 로드될 때만 발생합니다.
이 문제를 해결하는 샘플 크로스 브라우저 코드(Firefox, Opera, Safari, IE 등)를 알려줄 수 있습니까?파이어폭스에 대해 잘 알고 있습니다.pageshow이벤트지만 안타깝게도 오페라와 사파리 둘 다 이것을 실행하지 않습니다.
여러분, 저는 JQuery가 오직 한 가지 효과만 있다는 것을 발견했습니다: 페이지는 뒤로 버튼을 누르면 다시 로드됩니다.이는 "준비"와 관련이 없습니다.
이것은 어떻게 작동합니까?JQuery는 언로드 이벤트 수신기를 추가합니다.
// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...
기본적으로 아무것도 하지 않습니다.그러나 이벤트 핸들러에 포함된 내용에 관계없이 Safari, Opera 및 Mozilla에서 다시 로드가 발생하는 것처럼 보입니다.
[편집(니콜레이):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를 사용하면 유사한 결과가 나타납니다.
언로드 없이 이 제품과 비교할 수 있습니다.
<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>
일부 최신 브라우저(Chrome이 아닌 Firefox, Safari 및 Opera)는 사용자가 Back을 탐색할 때 관련된 특수 "Bfcache"(모질라가 발명한 용어)를 지원합니다.일반(HTTP) 캐시와 달리 페이지의 전체 상태(JS, DOM 상태 포함)를 캡처합니다.이렇게 하면 사용자가 페이지를 떠난 것과 정확하게 페이지를 더 빨리 다시 로드할 수 있습니다.
그load이 bfcache에서 페이지를 로드할 때 이벤트가 실행되지 않습니다.예를 들어, "load" 핸들러에서 UI를 만들고 "load" 이벤트가 처음 로드될 때 한 번 실행되고 두 번째로 bfcache에서 페이지를 다시 로드할 때 페이지는 중복된 UI 요소로 종료됩니다.
이러한 이유로 "언로드" 처리기를 추가하면 페이지가 bfcache에 저장되지 않으므로 다시 탐색하는 속도가 느려집니다. 언로드 처리기는 정리 작업을 수행하여 페이지를 작업할 수 없는 상태로 만들 수 있습니다.
이동/복귀 시기를 알아야 하는 페이지의 경우 Firefox 1.5+ 및 버그 28758 수정 버전의 Safari는 "pageshow" 및 "pagehide"라는 특수 이벤트를 지원합니다.
참조:
- 웹킷: http://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
- 파이어폭스: https://developer.mozilla.org/En/Using_Firefox_1.5_caching .
- 크롬: https://code.google.com/p/chromium/issues/detail?id=2879
사용자가 뒤로 또는 앞으로 클릭했을 때 js가 실행되지 않는 문제가 발생했습니다.저는 처음에 브라우저의 캐싱을 중단하려고 했지만, 이것은 문제가 되지 않는 것처럼 보였습니다.라이브러리 등을 모두 로드한 후에 내 자바스크립트가 실행되도록 설정되었습니다.ReadyStateChange 이벤트를 통해 확인했습니다.
몇 가지 테스트를 거친 후 뒤로를 클릭한 페이지에서 요소의 readyState가 'loaded'가 아니라 'complete'라는 것을 알게 되었습니다. 추가하기|| element.readyState == 'complete'내 조건부 진술로 내 문제를 해결했습니다.
제 연구 결과를 공유하고 싶었을 뿐입니다. 다른 사람을 도와주기를 바랍니다.
완전성을 위해 편집
내 코드는 다음과 같습니다.
script.onreadystatechange(function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
// call code to execute here.
}
});
스크립트 변수 위의 코드 샘플에는 DOM에 추가된 새로 생성된 스크립트 요소가 있습니다.
좋아요, 여기 오페라를 포함한 모든 브라우저에서 작동하는 ckramer의 초기 솔루션과 palehorse의 예를 기반으로 한 최종 솔루션이 있습니다.history.navigationMode를 'compatible'로 설정하면 jQuery의 Ready 기능은 Opera 및 기타 주요 브라우저에서 Back 버튼 작동 시 실행됩니다.
예:
history.navigationMode = 'compatible';
$(document).ready(function(){
alert('test');
});
Opera 9.5, IE7, FF3, Safari에서 테스트를 해봤는데 모두 작동합니다.
저는 위의 예시들을 작동시키지 못했습니다.저는 단지 뒤로 버튼을 통해 페이지로 돌아올 때 수정된 특정 디바 영역의 새로 고침을 트리거하고 싶었습니다.제가 사용한 트릭은 숨겨진 입력 필드("더티 비트"라고 함)를 원래의 디브 영역에서 변경되는 즉시 1로 설정하는 것이었습니다.숨겨진 입력 필드는 제가 뒤로 클릭할 때 실제로 값을 유지하기 때문에 로드 시 이 비트를 확인할 수 있습니다.설정되어 있으면 페이지를 새로 고칩니다(또는 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>
그리고 뒤로 버튼을 클릭할 때마다 제대로 작동합니다.
나는 ckramer에서 jQuery의 ready 이벤트가 IE와 FireFox에서 작동한다는 것을 확인할 수 있습니다.여기 샘플이 있습니다.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var d = new Date();
$('#test').html( "Hi at " + d.toString() );
});
</script>
</head>
<body>
<div id="test"></div>
<div>
<a href="http://www.google.com">Go!</a>
</div>
</body>
</html>
내 기억이 맞다면 언로드() 이벤트를 추가한다는 것은 페이지를 캐시할 수 없다는 것을 의미합니다. 사용자가 이동할 때 페이지의 상태가 변경되거나 변경될 수 있기 때문입니다.따라서 - 기록 개체를 탐색하여 페이지로 돌아갈 때 페이지의 마지막 초 상태를 복원하는 것은 안전하지 않습니다.
페이지 로드가 아닌 "언로드"를 위한 것으로 생각했는데, "뒤로"를 누를 때 이벤트를 발생시키는 것에 대해 이야기하고 있지 않습니까?$document.ready()는 페이지 로드 시 원하는 이벤트에 대한 것입니다. 페이지를 다시 로드할 때 이전 페이지에서 무엇을 실행할지에 대해 언급하는 경우가 아니면 "뒤로"를 클릭할 때가 아닙니다.그리고 $document.ready()가 포함되어 있더라도 자바스크립트가 여전히 존재한다는 것을 알았기 때문에 페이지가 캐시되지 않는지 확신할 수 없습니다.수정할 때마다 이 이벤트가 있는 스크립트를 편집할 때 Ctrl+F5를 눌러야 했고 페이지에서 결과를 테스트하고 싶습니다.
$(window).unload(function(){ alert('do unload stuff here'); });
는 "뒤로"를 누르고 현재 페이지를 언로드할 때 온로드 이벤트에 대해 원하는 항목이며, 사용자가 브라우저 창을 닫을 때도 실행됩니다.$document.ready() 응답보다 수가 적더라도 이는 원하는 것처럼 들렸습니다.기본적으로 이벤트는 현재 페이지가 닫히는 동안 시작되거나 로드되는 동안 "뒤로"를 클릭할 때 로드되는 이벤트와 다릅니다.IE 7에서 테스트를 마쳤습니다. 다른 브라우저는 우리가 있는 곳에서 허용되지 않기 때문에 말할 수 없습니다.하지만 이것은 다른 선택일 수도 있습니다.
jQuery의 Ready 이벤트는 이런 종류의 문제를 위해 만들어졌습니다.구현에 대해 자세히 알아보고 자세한 내용을 확인할 수 있습니다.
전체 jquery 라이브러리를 사용하지 않으려는 사람들을 위해 별도의 코드로 구현을 추출했습니다.0.4KB밖에 안 됩니다.
코드는 독일어 튜토리얼과 함께 다음 위키에서 찾을 수 있습니다. http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html
빌, 감히 당신의 질문에 답을 드리지만, 제 추측으로는 100% 확신할 수 없습니다.사용자를 기록 페이지로 이동시킬 때 다른 IE 브라우저는 캐시에서 페이지와 해당 리소스를 로드할 뿐만 아니라 전체 DOM(읽기 세션) 상태도 복원할 것이라고 생각합니다.IE는 DOM 복원을 수행하지 않으며(또는 적어도 그렇게 하지 않았습니다), 따라서 온로드 이벤트는 적절한 페이지 재초기화를 위해 필요한 것으로 보입니다.
저는 $(문서)를 사용하여 빌의 솔루션을 사용해 보았습니다.준비...하지만 처음에는 효과가 없었습니다.HTML 섹션 뒤에 스크립트를 배치하면 작동하지 않는다는 것을 알게 되었습니다.헤드 섹션인 경우 IE에서만 작동합니다.이 스크립트는 Firefox에서 작동하지 않습니다.
좋아요, 제가 이것을 시도해봤는데 파이어폭스 3, 사파리 3.1.1, IE7에서는 작동하지만 Opera 9.52에서는 작동하지 않습니다.
아래에 표시된 예제(falehorse의 예제를 기반으로 함)를 사용하면 페이지가 처음 로드될 때 알림 상자 팝업이 나타납니다.그러나 다른 URL로 이동한 다음 뒤로 단추를 눌러 이 페이지로 돌아가면 Opera에서 알림 상자 팝업이 표시되지 않습니다(다른 브라우저에서는 표시됨).
어쨌든 지금은 이 정도면 충분할 것 같습니다.여러분 감사합니다!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta http-equiv="expires" content="0">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
alert('test');
}
);
</script>
</head>
<body>
<h1>Test of the page load event and the Back button using jQuery</h1>
</body>
</html>
IE 9에서 Unload 이벤트가 제대로 작동하지 않습니다.로드 이벤트(onload())로 시도해봤는데 IE 9와 FF5에서 잘 작동합니다.
예:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(window).bind("load", function() {
$("[name=customerName]").val('');
});
</script>
</head>
<body>
<h1>body.jsp</h1>
<form action="success.jsp">
<div id="myDiv">
Your Full Name: <input name="yourName" id="fullName"
value="Your Full Name" /><br> <br> <input type="submit"><br>
</div>
</form>
</body>
</html>
저는 html 템플릿을 사용했습니다.이 템플릿의 custom.js 파일에는 다음과 같은 기능이 있었습니다.
jQuery(document).ready(function($) {
$(window).on('load', function() {
//...
});
});
하지만 다른 페이지로 이동한 후 다시 이동하면 이 기능이 작동하지 않았습니다.
그래서 저는 이것을 시도했고 그것은 효과가 있었습니다.
jQuery(document).ready(function($) {
//...
});
//Window Load Start
window.addEventListener('load', function() {
jQuery(document).ready(function($) {
//...
});
});
현재 저는 2개의 "ready" 기능을 가지고 있지만 오류가 발생하지 않고 페이지가 잘 작동하고 있습니다.
그럼에도 불구하고 Windows 10 - Opera v53 및 Edge v42에서 테스트되었지만 다른 브라우저에서는 테스트되지 않았음을 선언해야 합니다.명심하세요...
참고: jquery 버전은 3.3.1이었고 마이그레이션 버전은 3.0.0이었습니다.
언급URL : https://stackoverflow.com/questions/158319/is-there-a-cross-browser-onload-event-when-clicking-the-back-button
'programing' 카테고리의 다른 글
| 빔 위드 파워셸 (0) | 2023.07.29 |
|---|---|
| matplotlib에서 색상표의 중간점 정의 (0) | 2023.07.29 |
| 자주 사용되는 PDO 행 수 (0) | 2023.07.29 |
| C/C++에서 주조된 유형은 정확히 무엇입니까? (0) | 2023.07.29 |
| jQuery AJAX를 사용한 PHP의 여러 반환 값 (0) | 2023.07.29 |