タグ付けされた質問 「browser-history」

13
history.pushStateを介して履歴の変更について通知を受ける方法は?
したがって、HTML5 history.pushStateがブラウザーの履歴を変更することを導入したので、Webサイトは、URLのフラグメントIDを変更する代わりに、これをAjaxと組み合わせて使用​​し始めます。 悲しいことに、これらの呼び出しはによって検出できなくなっていますonhashchange。 私の質問は、ウェブサイトがhistory.pushStateいつ使用するかを検出する信頼できる方法(ハック?;))はありますか?仕様では、発生するイベントについては何も述べられていません(少なくとも私は何も見つけることができませんでした)。 ファサードを作成window.historyして自分のJavaScriptオブジェクトに置き換えようとしましたが、まったく効果がありませんでした。 詳細説明:これらの変更を検出して適切に動作する必要があるFirefoxアドオンを開発しています。 数日前に同様の質問があり、いくつかのDOMイベントを聞くことが効率的であるかどうかを尋ねましたが、これらのイベントはさまざまな理由で生成される可能性があるため、それに頼るのは避けたいと思います。 更新: これは、呼び出されたonpopstateときにトリガーされないことを示すjsfiddle(Firefox 4またはChrome 8を使用)ですpushState(または何か問題がありますか?遠慮なく改善してください!)。 アップデート2: もう1つの(側面の)問題は、window.location使用時に更新されないことですpushState(ただし、これについてはすでにここで読んだので、私はそう思います)。

5
ログアウト後、ユーザーが以前にアクセスした保護されたページを表示できないようにする
エンドユーザーがログアウト/サインアウト後に制限されたページに戻ることができないようにする必要があります。しかし現在、エンドユーザーは、ブラウザの[戻る]ボタン、ブラウザの履歴にアクセスするか、ブラウザのアドレスバーにURLを再入力することで、これを実行できます。 基本的に、エンドユーザーがサインアウトした後、制限されたページにアクセスできないようにしたいです。どうすればこれを最高に達成できますか?JavaScriptで戻るボタンを無効にできますか?

4
履歴に影響を与えずにハッシュナビゲーションを使用できますか?
私はそれがあるかもしれない怖い不可能そこURLのハッシュ値を変更する方法であるブラウザの履歴にエントリを残さないと、リロードせず?または同等のものを行いますか? 具体的には、次のような基本的なハッシュナビゲーションを開発していました。 //hash nav -- works with js-tabs var getHash = window.location.hash; var hashPref = "tab-"; function useHash(newHash) { //set js-tab according to hash newHash = newHash.replace('#'+hashPref, ''); $("#tabs li a[href='"+ newHash +"']").click(); } function setHash(newHash) { //set hash according to js-tab window.location.hash = hashPref + newHash; //THIS IS WHERE …

15
Chromeでのページの読み込み時のポップステート
OverаэтотвопросестьответынаStack Overflowнарусском:Chromeненужнаяперезагрузкастраницыhistory api WebアプリにHistory APIを使用していますが、1つの問題があります。ページの一部の結果を更新するためにAjax呼び出しを行い、history.pushState()を使用して、ページをリロードせずにブラウザーのロケーションバーを更新します。次に、もちろん、戻るボタンがクリックされたときに以前の状態を復元するためにwindow.popstateを使用します。 問題はよく知られています— ChromeとFirefoxはそのpopstateイベントを別の方法で扱います。Firefoxは初回ロード時に起動しませんが、Chromeは起動します。読み込み時にまったく同じ結果を更新するだけなので、読み込み時にイベントを発生させないように、Firefoxスタイルにしたいと思います。History.jsを使用する以外に回避策はありますか?私がそれを使用したくない理由は、それ自体が非常に多くのJSライブラリを必要とすることです。また、すでに多くのJSを含むCMSに実装する必要があるので、入れているJSを最小限にしたいと思います。 。 したがって、Chromeがロード時に「popstate」を起動しないようにする方法があるかどうか、または、すべてのライブラリが1つのファイルにマッシュアップされているときに誰かがHistory.jsを使用しようとしたかどうかを知りたいです。

11
HTML5履歴ポップステートでのブラウザのスクロールを防止する
popstateイベントが発生したときにドキュメントをスクロールするデフォルトの動作を防ぐことは可能ですか? 私たちのサイトはjQueryアニメーションスクロールとHistory.jsを使用しており、状態の変更により、pushstateまたはpopstateを介して、ページのさまざまな領域にユーザーをスクロールする必要があります。問題は、popstateイベントが発生すると、ブラウザが前の状態のスクロール位置を自動的に復元することです。 ドキュメントの幅と高さを100%に設定したコンテナ要素を使用して、そのコンテナ内のコンテンツをスクロールしてみました。私が見つけた問題は、ドキュメントのスクロールほどスムーズではないように見えることです。特にボックスシャドウやグラデーションのようなcss3をたくさん使用する場合。 また、ユーザーがスクロールを開始したときにドキュメントのスクロール位置を保存し、ブラウザーがページをスクロールした後にドキュメントを復元しようとしました(popstateで)。これはFirefox12では正常に機能しますが、Chrome 19では、ページがスクロールされて復元されるためにちらつきがあります。これは、スクロールとスクロールイベントが発生するまでの遅延(スクロール位置が復元される場所)に関係していると思います。 Firefoxはpopstateが起動する前にページをスクロールし(そしてscrollイベントを起動し)、Chromeは最初にpopstateを起動してからドキュメントをスクロールします。 履歴APIを使用している私が見たすべてのサイトは、上記と同様のソリューションを使用するか、ユーザーが前後に移動したときのスクロール位置の変更を無視します(GitHubなど)。 popstateイベントでドキュメントがスクロールされないようにすることは可能ですか?

2
iframeでwindow.location.replaceを使用できますか?
履歴window.location.replaceを回避し、ページをリロードせずにページ上のアンカーをターゲットにするために使用できますが、iframeではできませんか? 問題は、CSP(コンテンツセキュリティポリシー)違反、状態をscript-src 'unsafe-inline'有効にする必要があります。CSPを定義していない場合を除いて、CSPを定義して許可しscript-src 'unsafe-inline'ても、同じ違反エラーが発生します。ie11 / chrome / ffでも同じ結果になります。 同じドメイン(同じディレクトリ内)の iframe 。 コンソールでiframeをターゲットにして、コンソールで使用window.location.replace('/samepage.html#onpage_anchor')します。 できます。 これは、ページをリロードすることなく、履歴なしでページ上のアンカーをターゲットにします。 同じコードをアンカーリンクにインラインで配置すると機能します。 外部スクリプトで同じコードを使用すると、csp違反エラーが発生します。 これは、iframe内でなくても正常に機能します。 私は、CSPを作成しようとしたアクションを許可しますが、いなくても、最も寛容なコンテンツセキュリティポリシー可能性は、それを可能にします。 編集:複数のファイルを許可する例をプランカーにまとめて、親/子ページを参照する適切なhrefを使用できるようにします。 プランカーの例に関するメモ: 問題はこれらの例では再現されません。 スクリプトは、iframeでも完全に機能します。ただし、同じコードがローカルサーバーで機能しないか、VPSでライブ実行すると機能しません。 プランカーはある種の抽象化レイヤーを介してブラウザーにコンテンツを提示しているため、CSP違反はプランカーでトリガーされないのではないかと思います。 親のアコーディオンリンクを初めてクリックすると、更新されます。これは、ページが最初にロードされる方法がindex.htmlを参照しないためです。以降のクリックは、ページをリロードしなくても期待どおりに機能します。最初はchild.htmlを参照するため、iframeの問題ではありません これらは、コードを機能させるために変更を必要とせずにコードを表示するのに適した例です(下記のStackoverflowスニペットで機能させるためにhrefを変更する必要がある場合など)。また、javascriptが正常に機能していることも示しています。しかし、それは実際の問題を示していません。実際の問題を確認するには、エディターにロードしてローカルサーバーまたはライブホスティング環境で実行する必要があります。 プランカーの例 スクリプトあり: 履歴 なしスクリプトなし: 履歴あり 簡略化されたコード例 1つのエントリを持つ単純なアコーディオン。問題を再現するのに十分です。 開く/閉じるをクリックすると、アコーディオンが展開/折りたたまれます。JSは必要ありません。JSはまったく同じことを行いますが、履歴はありません。正常に機能しますが、iframeでは機能しません。 コードスニペットのメモ: スニペットを実行して、私が説明していることについてのアイデアを得ることができますが、実際には問題を示していません。 スニペットは実際のブラウザのように動作せず、JavaScriptは機能しません。 スニペットはコードを示していますが、問題を確認するにはiframeで実行する必要があります。iframeの外で実行して、違いとその動作を確認します。 リンクがJSでどのように機能するか(URL全体を置き換える)のため、スニペットに表示されるのと同じようにリンクするのではなく、 実際にはこのようにする必要があります(スニペットの実際のHTMLページをターゲットにすることはできません)。あなたがあれば、あなたのエディタでこれを試してください(行ってください)、その後、することを忘れないでください、この形式へのリンクを変更し、彼らはまだあるので、同じページのアンカー、しかしpage.htmlがリンクに含まれています。href="https://stackoverflow.com/thispage.html#ac1"href="#ac1" this_document.html#anchor コードスニペットを表示 $(document).ready(function() { // anchor links without history $.acAnch = …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.