これを説明するために最善を尽くします。
view
ページに50以上のプロジェクトを表示するアプリケーションがあります。ユーザーは個々のプロジェクトをクリックし、update
ページに移動してプロジェクト情報を更新できます。ユーザーが個々のプロジェクト情報の更新を完了した後、ブラウザの「戻る」ボタンを押して前のview page
。古いプロジェクト情報(更新前)はまだあります。更新された情報を表示するには、ユーザーは更新を押す必要があります。それほど悪くはありませんが、ユーザーエクスペリエンスを向上させたいと思います。これを修正するアイデアはありますか?どうもありがとう。
PHPがユーザーがアクセスするブラウザを制御するブラウザを知る方法がないため、JSを使用してこの作業を行う必要があると思います...
多分これが役立つでしょう: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript
PHPコードの次の4行を使用します。
// any valid date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// always modified right now
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
// HTTP/1.1
header("Cache-Control: private, no-store, max-age=0, no-cache, must-revalidate, post-check=0, pre-check=0");
// HTTP/1.0
header("Pragma: no-cache");
キーは、Cache-Controlヘッダーの「no-store」句を使用しています。
「fb-cache」は非常に迷惑です。これを回避する簡単なJavaScriptの方法を次に示します。
window.onpageshow = function(evt) {
// If persisted then it is in the page cache, force a reload of the page.
if (evt.persisted) {
document.body.style.display = "none";
location.reload();
}
};
Safari 6およびIE10でテスト済み。
上記の解決策のどれも私にとってはうまくいきませんでした。このシンプルなソリューションは here 動作します...
ユーザーが[戻る]ボタンをクリックしたときに、ブラウザーでページを強制的に再度ダウンロードしようとしましたが、何も機能しませんでした。最新のブラウザにはページの個別のキャッシュがあり、ページの完全な状態(JavaScriptで生成されたDOM要素を含む)が保存されるため、ユーザーが戻るボタンを押すと、前のページがユーザーが離れた状態で即座に表示されます。ブラウザに強制的に「戻る」ボタンでページをリロードさせる場合は、onunload = ""を(X)HTML本文要素に追加します。
<body onunload="">
これにより、特別なキャッシュが無効になり、ユーザーが戻るボタンを押したときにページが強制的に再読み込みされます。使用する前によく考えてください。そのようなソリューションが必要なのは、サイトナビゲーションの概念に欠陥があるというヒントです。
if (window.name == "reloader") {
window.name = "";
location.reload();
}
window.onbeforeunload = function() {
window.name = "reloader";
}
この2つの関数をすべてのページに追加します
幸いなことに、IE10より下のブラウザをサポートする必要はありません。したがって、HTML5対応のブラウザのみをサポートする意思がある場合、または特権がある場合は、次のように動作します。
/*
* The following is intentional, to force Firefox to run
* this JS snippet after a history invoked back/forward navigation.
*/
window.onunload = function(){};
function formatTime(t) {
return t.getHours() + ':' + t.getMinutes() + ':' + t.getSeconds();
}
if (window.history.state != null && window.history.state.hasOwnProperty('historic')) {
if (window.history.state.historic == true) {
document.body.style.display = 'none';
console.log('I was here before at ' + formatTime(window.history.state.last_visit));
window.history.replaceState({historic: false}, '');
window.location.reload();
} else {
console.log('I was forced to reload, but WELCOME BACK!');
window.history.replaceState({
historic : true,
last_visit: new Date()
}, '');
}
} else {
console.log('This is my first visit to ' + window.location.pathname);
window.history.replaceState({
historic : true,
last_visit: new Date()
}, '');
}
さて、ここにコメントとフラブなしのコードがあります:
window.onunload = function(){};
if (window.history.state != null && window.history.state.hasOwnProperty('historic')) {
if (window.history.state.historic == true) {
document.body.style.display = 'none';
window.history.replaceState({historic: false}, '');
window.location.reload();
} else {
window.history.replaceState({historic : true}, '');
}
} else {
window.history.replaceState({historic : true}, '');
}
Body終了タグの直前に貼り付けておくと、かなりきれいなソリューションが得られます。
これは、クリックされる戻る/進むの任意の組み合わせで機能し、ユーザーが新しいページに到達した瞬間に、強制的な再読み込みは発生しません。
MDNのHistoryオブジェクトについて詳しく読む:
さて、更新ページに組み込みの戻るボタンを用意して、新しいボタンを送信することもできます(リンク<a href="<?= $_SERVER['HTTP_REFERRER']; ?>">BACK</a>
または、ページにヒットするたびに、新しいインプレッションであるか、戻るボタンが使用されたかにかかわらず、データをプルするように強制するスクリプトをページに配置します。
これが私のページのいくつかで使用されている解決策です。変更が行われるページにこれを追加します。
window.onbeforeunload = function() {
window.name = "reloader";
}
これらのページを離れるとトリガーされます。変更が行われた場合にもトリガーできます。再読み込みが必要なページを不必要に再読み込みしないようにします。その後、ブラウザが「戻る」使用後にリロードするページに。
if (window.name == "reloader")
{
window.name = "no";
reloadPage();
}
これにより、リロードが必要なページでリロードがトリガーされます...これが役立つことを願っています:)これはjsです。
これは私が使用したソリューションです:
<?php
session_start();
if (!$_SESSION['reloaded']) {$_SESSION['reloaded'] = time();}
else if ($_SESSION['reloaded'] && $_SESSION['reloaded'] == time()) { ?>
<script>
location.reload();
</script>
<?php } ?>
解決策を見つけるためにネット上で数日間検索した後、私は最終的にそれを理解し、後に追加します:
<script>
window.onbeforeunload = function(){window.location.reload();}
</script>
これはあなたが私に感謝する魅力のように機能します
このコードは、アクセスするたびにページをリロードします。
非表示のチェックボックスを作成し、以下のコードを使用します(coffeescript)
window.location.reload() if $("#refreshCheck")[0].checked
$("#refreshCheck")[0].checked = true