問題タブ [popstate]

を使用して div 内のコンテンツを置き換える jquery ナビゲーション スクリプトを作成しました.load。また、pushstate と popstate で HTML5 History API を使用しています。

コードはほとんど機能し、ブラウザーの戻るボタンと進むボタンは正常に機能しますが、ブラウザーで「戻る」を押して、アクセスした元のページに移動しようとするまでは。例えば：

1ページから開始

ページ 2 へのリンクをクリック - 作品

ページ 3 へのリンクをクリック - 作品

ページ 2 の「戻る」を押してください - 動作します

ページ 1 の「戻る」を押してください - 機能しません

...

コンソールに次のメッセージが表示されます。

Uncaught TypeError: Cannot read property 'url' of null

との初体験popstateです。ブラウザを元のページに戻すにはどうすればよいですか? 問題を十分に説明したことを願っています。どんな助けでも大歓迎です！

問題の実際の動作を確認したい場合は、ここに問題のライブ デモがあります。

Safari 7 の問題を見つけるのは難しいですが、奇妙な問題が 1 つあります。私が書いた ajax コンテンツ ローダー コードのブラウザー履歴を変更するためにpushstateとを使用しています。コードは、 Safari 7+ を除くすべてのブラウザーで機能popstateするコードを除いて、正常に機能します。Safari 6 以前では問題なく動作します。popstate

スクリプトはすべてのブラウザーで正常に動作します。Safari 7 では、ページが正しく読み込まれません。通常は非表示の#loadingdiv が表示され、通常は表示される#contentwrapperdiv が非表示になります。また、コンソールエラーが発生します:

chrome と popstate イベントに関連するトピックがたくさんあることは知っていますが、chrome をバージョン 35 にアップグレードした後、新しいトピックに遭遇しました。

これはケースです：

カテゴリやページなどを選択すると、カテゴリとフィルタを含む一覧ページが表示されます。コンテンツは ajax を介してリロードされ、すべて正常に動作する履歴 API によって処理されます。

しかし、リストのアイテムの詳細ページに移動すると-標準リクエスト、ページ全体がリロードされます-ブラウザの戻るボタンを押すと、アイテムを最後にクリックした位置にリストページが表示されますが、ポップステートがトリガーされます(そして私はしません初期ページ読み込み時のクロム popstate についてはここでは話さないでください (バージョン 34 では、popstate は init でトリガーされなくなりました)。また、前述のカテゴリを処理するためのコードにより、ページ全体がリロードされます。

問題は、戻るボタンを押した後に chrome 35 が popstate イベントをトリガーすることです。私の質問は次のとおりです。

ユーザーが詳細ページからリスティング ページに戻った後に、このイベントがトリガーされたことを検出して、このページをリロードしないようにする方法。

ドキュメントオブジェクトのリファラーなどで試してみますが、初めて解決したように見えるときは、うまくいかない場合が常にありました。

私は今、これに何時間も苦労しています。.load() コールバックが起動しない理由がわかりません。誰でもこれに光を当てることができますか？助けてくれてありがとう。

負荷自体は正常に動作します。

AJAX ナビゲーションを作成しようとしていて、popState で問題が発生しています。以下は、pageName を pushStates する関数です (指定された div を content.html から .mainwrap にもロードします)。URL を解析して何をロードするかを決定する自己呼び出し関数があり、その中に popstate イベント ハンドラーがあります。最後に、要素を「ajax化」するための data-page 属性を持つ要素のクリック ハンドラーです。これについてどうやって間違っているのですか？

編集: 示唆されているように、2 つの関数の内部ではなく、2 つの関数の間に「var lastPage」を配置しました。まだ修正されていません。「戻る」で取得している URL は /#undefined です

ハッシュ タグに応じて、ページに JavaScript を使用してさまざまなコンテンツを読み込もうとしています。ただし、 popstateメソッドをサポートしていない古いブラウザーでも動作するはずです。

問題は、現在のページ (例)window.location.hashのリンク (例 ) をクリックした後に見ると、まだ古いハッシュ タグが表示されることです。2 番目のリンクをクリックした後にのみ、最初のリンクの前のハッシュ タグが に表示されます。#newhashtagexample.com/#currenthashtagdocument.readywindow.location.hash

では、popstate を使用せずに Web サイトのさまざまなハッシュ状態を処理する最も簡単な方法は何でしょうか?

ここでの初心者の質問で申し訳ありませんが、おそらく簡単ですが、javascriptについて重要な何かが欠けています..

index.php、food_and_health.php、enlightenment.php、about_us.php の 4 つの HTML ページを含む ajax Web サイトがあります。インデックスではなく、3 つの ajax 関数があります。

そして、前後に使用するために popstate 関数を追加する必要があることを理解しています。現在、チュートリアルを検討しています。ご覧のとおり、コンソールログしかありません。

「foo が定義されていません」というコンソール メッセージが表示されたので、グローバル変数にしようとしましたが、それが問題なのかどうかよくわかりませんでした。

「foo」のIDを持つアンカーまたはHTMLには何もありませんが、js.fileでfooから「text」、および「cssmenu」に変更して、id = 'を追加しようとしましたhtml のアンカー タグの 1 つに foo' を追加しましたが、メッセージは同じです。

だから、それは私のajax関数内のローカル変数だと思います。実際、ページは前後を除いて機能し、ajax-page/ 状態に直接移動しようとすると機能します。これは、popstate 関数にデータを設定する必要があるため、pushstate-function のように、this.url のようなものがそこでも機能すると考えています。ない。）

しかし、popstate 関数を追加するにはどうすればよいでしょうか。ページごとに指定する必要がありますか、または、プッシュステート関数で行われるように this.url を取得し、プッシュステートに保存されるため、その状態を使用することができますか?

どうにかして、ajaxfuntionでもpopstateをリンクする必要があると思います..

2番目の質問、あなたはそれほど重要ではありません。コンソール ログに jQuery が表示されるのはなぜですか? それは「google-apis」が原因で、私のフォント (タンジェリン) のリンクですか? 私は jQuery を使用していないので、インデックス ページが jQuery を使用していることに驚きましたが、それが問題だと思います。私のコンソールには、jquery.1.8.2.min.js と、collectorjQuery.js があります。これらは「googleapis」からのものですか? :)

jsfiddle も追加します。これは私の food_and_health.php ページ、および私の css と js を示しています。(css はほとんど無視します。'ok' を探すために追加しただけです) :

http://jsfiddle.net/y0o39897/4/

また、cssmenu はフィドルでは開きませんが、少なくとも chrome と firefox では開きます。

これが私のjsで、少し苦労しています!

私はこれについて多くのページを読みましたが、理解できる限りでは; pushstate は任意の状態 (私の場合は this.url)、クリックされた URL/アンカーを取り、その状態を保存します。popstate は、その状態を使用して、その html ページ内の ajax ページ間を前後にナビゲートします。たとえば、page2/ajaxfile.php から page1/someotherAjaxpage.php に戻りたい場合は、replacestate が必要です。これは正しいです？

長い質問と 2 つの質問で申し訳ありませんが、私は初心者なので、これについてできるだけ明確にし、完全に理解したいと考えています。そのため、jQuery を使用しないようにしています。

ajax-popstate-and javascript (jQuery ではない) を使用したチュートリアルを見つけるのに苦労しています。これについて助けてくれてありがとう:)