[解決済み] history.pushStateで履歴の変更を通知してもらうには?
質問
では、HTML5で導入された
history.pushState
を使用してブラウザの履歴を変更できるため、ウェブサイトはURLのフラグメント識別子を変更する代わりに、Ajaxと組み合わせてこれを使用するようになります。
悲しいことに、このことは、これらの呼び出しを
onhashchange
.
質問です。
WebサイトがMySQLを使用していることを検出する信頼できる方法(ハック?
history.pushState
? 仕様書には、発生するイベントについては何も書かれていません(少なくとも私は何も見つけられませんでした)。
ファサードを作ろうと思って
window.history
を自作のJavaScriptオブジェクトに置き換えたが、全く効果がなかった。
さらに説明します。
私は、これらの変更を検出し、それに応じて行動する必要があるFirefoxアドオンを開発しています。
数日前にも似たような質問がありました。
DOMイベント
しかし、これらのイベントはさまざまな理由で発生する可能性があるため、私はそれを当てにしたくありません。
更新してください。
jsfiddleはこちらです。
(Firefox 4 または Chrome 8 を使用) を示しています。
onpopstate
はトリガーされません。
pushState
が呼び出されます (それとも私が何か間違ったことをしているのでしょうか? 自由に改善してください!)。
アップデート2。
もう一つの(サイド)問題は
window.location
を使用した場合、更新されません。
pushState
(しかし、私はこのことについてSOですでに読んだと思います)。
解決方法は?
<ブロッククオート5.5.9.1 イベント定義
は、以下の通りです。 ポップステート イベントは、セッション履歴のエントリに移動する際に、特定のケースで発生します。
これによると、Popstateを使用した場合に、Popstateが発生する理由はない。
pushState
. しかし、次のようなイベントは
pushstate
が便利でしょう。なぜなら
history
はホストオブジェクトなので、扱いに注意が必要ですが、この場合、Firefoxはいいみたいです。このコードで問題なく動きます。
(function(history){
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
// ... whatever else you want to do
// maybe call onhashchange e.handler
return pushState.apply(history, arguments);
};
})(window.history);
あなたのjsfiddle になる :
window.onpopstate = history.onpushstate = function(e) { ... }
モンキーパッチができる
window.history.replaceState
を、同じように使ってください。
注:もちろん
onpushstate
をグローバルオブジェクトに追加するだけで、さらに多くのイベントを処理させることができます。
add/removeListener
関連
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] JavaScriptでクエリ文字列の値を取得するにはどうすればよいですか?
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み】「GET」パラメータから値を取得する(JavaScript)【重複】。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
JavaScriptの配列共通メソッド解説
-
vueにおけるv-forループオブジェクトのプロパティ
-
Vueのフィルタの説明
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み] テスト
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] 位置情報ハッシュの変化を検出するにはどうすればよいですか?