問題タブ [popstate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
633 参照

jquery - 全画面セクションの History.js


私は自分のプロジェクトに取り組んできました- 完全な (重要な) JavaScript はここにあります。ユーザーがブラウザの前と次のボタンを使用してナビゲートできるように、 history.jsを含めたいと考えています。また、生成された URL が存在しなくてもアクセスできるようにしたいと考えています。これらの URL は履歴 API によって生成されるため、HTML ドキュメントにはリンクされません。

私がすでに行ったこと

プラグインのAPI Exposed セクションを見て、Mozilla のドキュメントを読んで、これを機能させることができました。

  • インターフェイスの次、前、およびベース リンクを使用してナビゲートするときに、URL が正しい
  • インターフェイスの次、前、および基本リンクを使用してナビゲートするときにタイトルが正しい

このための (簡略化された) コードは次のとおりです。

これは正常に機能します。

やり遂げられそうにないこと

これは非常にうまく機能しますが、最終的な機能がなければ役に立ちません:

  • URL が生成されるようになりましたが (例:など) /lamp/deskユーザーがこれらのリンクのいずれかに直接アクセスすると (または単にページをリロードすると)、URL が存在しないというメッセージが表示されます。
  • ブラウザーのナビゲーション ボタンはクリック可能ですが (それに応じて URL が変更されます)、コンテンツはまったく変更されません。

誰でもこれについてフィードバックをいただけますか? 腰が痛いほど長い間これに取り組んでいます。


私はcjhvealによって提供されたコードから作業しようとしましたが、これまでのところこれを取得しました(テスト目的のためだけに):

奇妙なことに、History.js で正しいタイトルにログを記録できません... ページをログに記録すると、 "lamp", "bramvanroy.be/fullScreenSection/lamp"(それぞれtitleと) のように返されますが、セクションのオブジェクトでurl定義されているタイトルを取得する必要があります。data-titleそれでも、セクションで定義されているようにtitが機能するようにコードを調整しましたが、返さdata-urlれる属性と同じtitleですが、それでも何も起こりません!

0 投票する
1 に答える
987 参照

pjax - popState とアニメーション - pjax

画面からスライドして新しいコンテンツをロードし、スライドバックする div があります。私はjquery pjaxを使用していますが、その部分はうまく機能します:

しかし、ブラウザの戻る/進むボタンが使用されている場合、機能しません。私はさまざまなことを試しました。ここで素敵な記事を見つけましたが、わかりません: http://artfindertech.wordpress.com/tag/historyapi/

問題は、ブラウザの戻るボタンをクリックした瞬間に div の内容が変わることです。その後、スライドしますが、戻りません。また、URL は 1 秒間前のページに変わりますが、サイトのメイン URL にジャンプします。popState の私のトライアルは次のとおりです。

0 投票する
1 に答える
423 参照

jquery - pushstate / ajax ウェブサイトの正しいファイル構造

サイトを完全な html5 ajax Web サイトに変換して、pushstate および popstate で制御された場所にしようとしています。

私の現在のファイル構造は次のとおりです。

わかりました。現在、すべてのファイルには「common」フォルダーに「header.php」および「footer.php」ファイルが含まれています。

ヘッダー ファイルとフッター ファイルの基本的なバージョンは次のようになります。

Header.php (pushState/popState/ajax スクリプトを含む):

フッター.php:

ここで、ヘッダーとフッターをすべてのファイルに含めたままにしておくと、新しい HTTP 要求を使用してそれらの URL のいずれかに移動すると、ページは正常に動作しますが、アンカー リンクを使用して移動しようとすると、一部の css スタイルが親を参照します。ページの代わりに div を使用すると、通常は完全に表示されません。

一方、ヘッダー ファイルとフッター ファイルをインデックス ページ以外のページに含めない場合、インデックス ページから開始してナビゲートするときに問題なく読み込まれますが、いずれかを直接指す新しい HTTP 要求を使用しようとすると、すべてのスクリプトと css ファイルを含むヘッダー ファイルが含まれていないため、生のページ コンテンツだけでなく index.php ファイル以外のファイル URL が表示されます。

mysiteurl.com にアクセスするとインデックス ページが正常に読み込まれ、mysiteurl.com/page3 などの新しい http リクエストを使用して別のページに直接移動できるように、このようなサイトをどのように構成する必要があるかを正確に知る必要があります。 .php も正常に読み込まれ、すべてのナビゲーションが正しく機能します。

私のためにこれをレイアウトしてくれた人に前もって感謝します。

0 投票する
1 に答える
1506 参照

javascript - popstate イベントのステート オブジェクトのブラウザ サポートは?

メソッドのブラウザー サポートを見つけることができますがpushState、ブラウザーのすべてのバージョンが実際にpopstateイベントで状態オブジェクトを渡すとは限りません。ブラウザがサポートしている場合に使用できると期待できるものpushStateですか?

0 投票する
0 に答える
506 参照

javascript - DIV および AJAX での history.popstate の使用

サイトの最初の「ランディング」ステージに背景画像と非常に最小限のコンテンツが含まれている Web サイト用の「ポータル」タイプのページを作成していますが、「私たちについて」というタイトルのリンクをクリックすると、ページをロードする AJAX コマンドが起動されます ' about.php」を「MoreDiv」と呼ばれる DIV に変換します。さらに、「MoreDiv」を表示するように設定するために JavaScript コマンドが起動され、同時に最初のテキスト div (「phototext」と呼ばれる) と「bottomlinks」と呼ばれる追加の div が非表示になります。ファイル 'about.php' には、AJAX を呼び出して 'InnerContent' と呼ばれる別の Div 内のコンテンツをロードするリンクのリストが含まれています...この div は 'MoreDiv' 内にあるため、リンクのリストは所定の位置に残り、下部のみページの一部が変更されます。リンクのリスト内に「ホームに戻る」があります

ページは PHP ファイルであり、表示された URL を直接入力すると、それぞれの Div に読み込まれた正しいサブページを含むページが読み込まれるため、 history.pushstate を使用して URL を希望どおりに表示しました。

私が今抱えている問題は、 history.popstate を使用してこれらのバリエーションをブラウザー履歴のページに保存し、ブラウザーの戻るボタンをクリックすると Div の内容が変更されるようにする方法です....

Javascript:

そして、ページには次の HTML が含まれています (メイン ページと about.php がそれぞれマークされています)。

これがページの基本的なセットアップです (スペースを埋めるためだけにテキストが挿入されます)...どうすれば history.popstate を機能させて、現在の javascript/AJAX ベースのリンクを維持しながら、履歴状態に基づくそれぞれの DIV のコンテンツ (および可視性)? ありがとう。

(ps。さらに、「ホームに戻る」リンクを使用して、history.pushstate を使用して URL に加えられた変更をリセットできるようにしたいと考えています...現在、URL を変更しても何もできないためです。 "?home=y" を追加する)

0 投票する
0 に答える
300 参照

ajax - onpopstateを実装する方法は?たくさんのことを読んだ後、混乱しました

私はAJAXを使用してコンテンツをロードしており、pushastateを使用してURLを変更しています。以下は私のコードです。私の場合、onpopstateを実装して戻るボタンを有効にする方法を教えてもらえますか。

HTML

JS

ユーザーがリンクをクリックすると、まずロード用の削除クラスを追加し、次にURLを取得し、そのURLからページ名を取得します(「pageName」に保存)。「target」はクリックされたリンクのhrefattrおよび「c」です。はurlに表示する値です(たとえば、example.com / profile.jsp?tab = info、ここでhrefがinfo.jspの場合、「c」はinfoになります)、最後に「loadContent」関数を呼び出しますこれは、ajaxコンテンツをロードし、pushStateを使用してURLを変更します。

0 投票する
1 に答える
1916 参照

html - iframe の popstate イベントを処理する方法、または iframe でブラウザの戻るボタンを無効にする方法は?

Web サイトで soundcloud の html5 ウィジェットを使用しようとしていますが、iframe 内にウィジェットが読み込まれます。トラックが終了したら、ウィジェットへのJavaScript APIを使用して別の URL をロードし、iframe をリロードします。ブラウザの戻るボタンが有効になります。戻るボタンを押すと、ウィジェットが前の URL に読み込まれます。しかし、私は自分のページでajaxを使用しており、戻るボタンを押すとモンキーレンチが機能します。戻るボタンを押したときにiframeが履歴をプッシュしたり、操作を処理したりするのを防ぐ方法があるのだろうか。助けていただけますか?

0 投票する
4 に答える
5764 参照

javascript - 別のドメインのページから戻ったときに Firefox に popstate イベントを発生させるにはどうすればよいですか?

私は単純な Web ページを持っています。

現在、Chrome と Firefox がイベントをトリガーする方法には多くの違いがあります(IE のテストに取り掛かったときpopstateに、自分が何に直面しているのかを考えると身震いします)。popstate これら 2 つのリンクのいずれかをクリックし、[戻る] ボタンを押してもう一度クリックします。Firefox は、ハッシュ部分を変更するリンクのイベントをトリガーし (ハッシュ リンクが同じ場合は初回のみ)、Yahoo リンクをクリックしてから [戻る] ボタンをクリックしても、まったくトリガーしません。

Firefox で、ユーザーが別のドメインのまったく別のサイトからクリックして戻ってきたことを確認する方法はありますか? Firefox でこの目的のために機能する別のイベントはありますか? (yahoo.com から戻ったときも load イベントはトリガーされません。)

0 投票する
0 に答える
338 参照

jquery - History API と jQuery が機能しない

内部リンクが押されたときに div をページにロードし、履歴状態をプッシュして場所を変更しようとしています。また、popstate に前の div をロードするページを取得しようとしています。false を返すことさえできませんが、ページの別の部分で使用できるため、jQuery が含まれていることはわかっています。誰が何が間違っているのか知っていますか?