뒤로 버튼을 클릭 할 때 크로스 브라우저 onload 이벤트가 있습니까?
모든 주요 브라우저 (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"라는 특수 이벤트를 지원합니다.
참고 문헌 :
- 웹킷 : 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가 '로드'되지 않고 '완료'인 것을 알았습니다. || 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에서 테스트했으며 모두 작동합니다.
I couldn't get the above examples to work. I simply wanted to trigger a refresh of certain modified div areas when coming back to the page via the back button. The trick I used was to set a hidden input field (called a "dirty bit") to 1 as soon as the div areas changed from the original. The hidden input field actually retains its value when I click back, so onload I can check for this bit. If it's set, I refresh the page (or just refresh the divs). On the original load, however, the bit is not set, so I don't waste time loading the page twice.
<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>
And it would trigger properly whenever I clicked the back button.
If I remember rightly, then adding an unload() event means that page cannot be cached (in forward/backward cache) - because it's state changes/may change when user navigates away. So - it is not safe to restore the last-second state of the page when returning to it by navigating through history object.
I thought this would be for "onunload", not page load, since aren't we talking about firing an event when hitting "Back"? $document.ready() is for events desired on page load, no matter how you get to that page (i.e. redirect, opening the browser to the URL directly, etc.), not when clicking "Back", unless you're talking about what to fire on the previous page when it loads again. And I'm not sure the page isn't getting cached as I've found that Javascripts still are, even when $document.ready() is included in them. We've had to hit Ctrl+F5 when editing our scripts that have this event whenever we revise them and we want test the results in our pages.
$(window).unload(function(){ alert('do unload stuff here'); });
is what you'd want for an onunload event when hitting "Back" and unloading the current page, and would also fire when a user closes the browser window. This sounded more like what was desired, even if I'm outnumbered with the $document.ready() responses. Basically the difference is between an event firing on the current page while it's closing or on the one that loads when clicking "Back" as it's loading. Tested in IE 7 fine, can't speak for the other browsers as they aren't allowed where we are. But this might be another option.
I can confirm ckramer that jQuery's ready event works in IE and FireFox. Here's a sample:
<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>
for the people who don't want to use the whole jquery library i extracted the implementation in separate code. It's only 0,4 KB big.
You can find the code, together with a german tutorial in this wiki: http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html
jQuery's ready event was created for just this sort of issue. You may want to dig into the implementation to see what is going on under the covers.
Bill, I dare answer your question, however I am not 100% sure with my guesses. I think other then IE browsers when taking user to a page in history will not only load the page and its resources from cache but they will also restore the entire DOM (read session) state for it. IE doesn't do DOM restoration (or at lease did not do) and thus the onload event looks to be necessary for proper page re-initialization there.
I tried the solution from Bill using $(document).ready... but at first it did not work. I discovered that if the script is placed after the html section, it will not work. If it is the head section it will work but only in IE. The script does not work in Firefox.
OK, I tried this and it works in Firefox 3, Safari 3.1.1, and IE7 but not in Opera 9.52.
If you use the example shown below (based on palehorse's example), you get an alert box pop-up when the page first loads. But if you then go to another URL, and then hit the Back button to go back to this page, you don't get an alert box pop-up in Opera (but you do in the other browsers).
Anyway, I think this is close enough for now. Thanks everyone!
<!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>
Unload event is not working fine on IE 9. I tried it with load event (onload()), it is working fine on IE 9 and FF5.
Example:
<%@ 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>
I have used an html template. In this template's custom.js file, there was a function like this:
jQuery(document).ready(function($) {
$(window).on('load', function() {
//...
});
});
But this function was not working when I go to back after go to other page.
So, I tried this and it has worked:
jQuery(document).ready(function($) {
//...
});
//Window Load Start
window.addEventListener('load', function() {
jQuery(document).ready(function($) {
//...
});
});
Now, I have 2 "ready" function but it doesn't give any error and the page is working very well.
Nevertheless, I have to declare that it has tested on Windows 10 - Opera v53 and Edge v42 but no other browsers. Keep in mind this...
Note: jquery version was 3.3.1 and migrate version was 3.0.0
'IT' 카테고리의 다른 글
| C ++에서 제한 키워드는 무엇을 의미합니까? (0) | 2020.05.20 |
|---|---|
| 'setdefault'dict 메소드의 사용 사례 (0) | 2020.05.20 |
| this 포인터를 통해 템플릿 기본 클래스 멤버에 액세스해야하는 이유는 무엇입니까? (0) | 2020.05.20 |
| 클래스 객체에 대한 사용자 정의 문자열 표현을 만드는 방법은 무엇입니까? (0) | 2020.05.20 |
| Maven 프로젝트를 Eclipse로 가져 오기 (0) | 2020.05.20 |