すべての主要なブラウザー (IE を除く) では、onload戻るボタン操作の結果としてページが読み込まれたときに JavaScript イベントは発生しません。ページが最初に読み込まれたときにのみ発生します。
この問題を解決するクロスブラウザ コード (Firefox、Opera、Safari、IE など) のサンプルを教えてもらえますか? 私は Firefox のpageshowイベントに精通していますが、残念ながら Opera も Safari もこれを実装していません。
191023 次
15 に答える
123
みなさん、JQuery には 1 つの効果しかないことがわかりました。戻るボタンを押すと、ページがリロードされます。これは「準備完了」とは関係ありません。
これはどのように作動しますか？さて、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>
于 2008-10-14T14:32:27.130 に答える
81
一部の最新のブラウザ (Firefox、Safari、および Opera であり、Chrome は除く) は、ユーザーが [戻る] をナビゲートするときに関係する特別な「バック/フォワード」キャッシュ (Mozilla によって発明された用語である bfcache と呼びます) をサポートしています。通常の (HTTP) キャッシュとは異なり、ページの完全な状態 (JS、DOM の状態を含む) をキャプチャします。これにより、ユーザーがページを離れたときとまったく同じように、ページをより迅速に再読み込みできます。
このloadbfcache からページがロードされたときにイベントが発生することは想定されていません。たとえば、「load」ハンドラーで UI を作成し、「load」イベントが最初の読み込みで 1 回発生し、2 回目にページが bfcache から再読み込みされた場合、ページは最終的に次のようになります。 UI 要素の複製。
これは、「アンロード」ハンドラーを追加すると、ページが bfcache に格納されなくなる (したがって、戻るのが遅くなる) 理由でもあります。アンロード ハンドラーがクリーンアップ タスクを実行し、ページが動作不能な状態になる可能性があります。
ページが離れたり戻ったりするタイミングを知る必要があるページの場合、Firefox 1.5+ およびバグ 28758を修正したバージョンの Safari は、 「pageshow」および「pagehide」と呼ばれる特別なイベントをサポートしています。
参考文献:
于 2010-02-07T22:58:50.170 に答える
31
I ran into a problem that my js was not executing when the user had clicked back or forward. I first set out to stop the browser from caching, but this didn't seem to be the problem. My javascript was set to execute after all of the libraries etc. were loaded. I checked these with the readyStateChange event.
After some testing I found out that the readyState of an element in a page where back has been clicked is not 'loaded' but 'complete'. Adding || element.readyState == 'complete' to my conditional statement solved my problems.
Just thought I'd share my findings, hopefully they will help someone else.
Edit for completeness
My code looked as follows:
script.onreadystatechange(function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
// call code to execute here.
}
});
In the code sample above the script variable was a newly created script element which had been added to the DOM.
于 2010-02-19T19:35:07.393 に答える
22
OK、ここに ckramer の初期ソリューションと、Opera を含むすべてのブラウザーで動作する palehorse の例に基づく最終的なソリューションがあります。history.navigationMode を 'compatible' に設定すると、jQuery の ready 関数は、Opera やその他の主要なブラウザーの [戻る] ボタン操作で起動します。
このページに詳細があります。
例：
history.navigationMode = 'compatible';
$(document).ready(function(){
alert('test');
});
これを Opera 9.5、IE7、FF3、Safari でテストしたところ、すべてで動作しました。
于 2008-10-04T15:07:06.000 に答える
6
上記の例を機能させることができませんでした。戻るボタンを使用してページに戻ったときに、特定の変更された div 領域の更新をトリガーしたかっただけです。私が使用したトリックは、div 領域が元の領域から変更されるとすぐに、非表示の入力フィールド (「ダーティ ビット」と呼ばれる) を 1 に設定することでした。非表示の入力フィールドは、クリックして戻ると実際にはその値を保持するため、オンロードでこのビットを確認できます。設定されている場合は、ページを更新します (または単に div を更新します)。ただし、元のロードではビットが設定されていないため、ページを 2 回ロードして時間を無駄にすることはありません。
<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>
そして、戻るボタンをクリックするたびに適切にトリガーされます。
于 2012-05-31T23:22:16.640 に答える
4
私の記憶が正しければ、unload（）イベントを追加すると、ページをキャッシュできなくなります（順方向/逆方向キャッシュに）-状態が変化する/ユーザーが離れると変化する可能性があるためです。したがって、履歴オブジェクトをナビゲートしてページに戻るときに、ページの最後の2番目の状態を復元することは安全ではありません。
于 2009-02-24T09:57:56.640 に答える
4
「戻る」を押したときにイベントを発生させることについて話しているのではないので、これはページの読み込みではなく「onunload」のためだと思いましたか? $document.ready() は、話している場合を除き、「戻る」をクリックしたときではなく、そのページにアクセスする方法 (つまり、リダイレクト、URL に直接ブラウザーを開くなど) に関係なく、ページの読み込み時に必要なイベント用です。前のページが再度読み込まれたときに何を起動するかについて。$document.ready() が含まれている場合でも、JavaScript がまだキャッシュされていることがわかったので、ページがキャッシュされていないかどうかはわかりません。このイベントを持つスクリプトを編集するときは、変更するたびに Ctrl+F5 を押す必要があり、ページで結果をテストする必要がありました。
$(window).unload(function(){ alert('do unload stuff here'); });
「戻る」を押して現在のページをアンロードするときに onunload イベントに必要なものであり、ユーザーがブラウザー ウィンドウを閉じたときにも発生します。$document.ready() 応答の数で私が数を上回っていたとしても、これは望ましいことのように聞こえました。基本的に違いは、現在のページを閉じているときに発生するイベントと、読み込み中に「戻る」をクリックしたときに読み込まれるイベントの違いです。IE 7 で問題なくテストされていますが、他のブラウザはここでは許可されていないため、これについては言えません。しかし、これは別のオプションかもしれません。
于 2011-02-16T15:54:43.663 に答える
4
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>
于 2008-10-01T16:07:13.187 に答える
3
jquery ライブラリ全体を使用したくない人のために、別のコードで実装を抽出しました。サイズはわずか 0.4 KB です。
コードは、この wiki でドイツ語のチュートリアルと共に見つけることができます: http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html
于 2010-09-11T09:52:18.900 に答える
2
$(document).ready... を使用して Bill のソリューションを試しましたが、最初はうまくいきませんでした。html セクションの後にスクリプトを配置すると、機能しないことがわかりました。ヘッド セクションの場合は機能しますが、IE でのみ機能します。このスクリプトは Firefox では機能しません。
于 2010-05-10T06:53:41.910 に答える
2
ビル、私はあえてあなたの質問に答えますが、私の推測に 100% 確信があるわけではありません。ユーザーを履歴内のページに移動するとき、IE ブラウザー以外はページとそのリソースをキャッシュからロードするだけでなく、その DOM (読み取りセッション) 状態全体も復元すると思います。IE は DOM の復元を行わない (または少なくとも行わなかった) ため、適切なページの再初期化には onload イベントが必要なようです。
于 2008-10-01T16:04:35.063 に答える
1
UnloadイベントはIE9では正常に機能していません。loadイベント（onload（））で試してみましたが、IE9と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>
于 2011-08-07T11:25:50.197 に答える
1
OK、これを試してみたところ、Firefox 3、Safari 3.1.1、および IE7 では動作しますが、Opera 9.52では動作しません。
以下に示す例 (palehorse の例に基づく) を使用すると、ページが最初に読み込まれたときに警告ボックスのポップアップが表示されます。しかし、別の 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>
于 2008-10-01T16:37:13.100 に答える