pushState() + AJaxでスムーズなコンテンツの遷移 | スターフィールド株式会社

テクノロジーカテゴリーの変更を依頼記事元:

sterfield.co.jp

11 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fsterfield.co.jp%2Fdesigner%2Fpushstate-ajax%25E3%2581%25A7%25E3%2582%25B9%25E3%2583%25A0%25E3%2583%25BC%25E3%2582%25BA%25E3%2581%25AA%25E3%2582%25B3%25E3%2583%25B3%25E3%2583%2586%25E3%2583%25B3%25E3%2583%2584%25E3%2581%25AE%25E9%2581%25B7%25E7%25A7%25BB%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://sterfield.co.jp/designer/pushstate-ajax%E3%81%A7%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%BA%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E9%81%B7%E7%A7%BB/">pushState() + AJaxでスムーズなコンテンツの遷移 | スターフィールド株式会社</a><a href="https://b.hatena.ne.jp/entry/s/sterfield.co.jp/designer/pushstate-ajax%E3%81%A7%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%BA%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E9%81%B7%E7%A7%BB/">はてなブックマーク - pushState() + AJaxでスムーズなコンテンツの遷移 | スターフィールド株式会社</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

pushState() + AJaxでスムーズなコンテンツの遷移 | スターフィールド株式会社

Ajaxはページ遷移で発生するユーザーのストレスを軽減する方法として有効ですが、ページ遷移の履歴が残... Ajaxはページ遷移で発生するユーザーのストレスを軽減する方法として有効ですが、ページ遷移の履歴が残らないため、ブラウザの戻るボタンを押した場合に、ユーザーの意図しない動作になってしまう場合が多々あります。 HTML5のJavaScriptの仕様で、履歴を扱うhistoryオブジェクトに、 pushState()およびpopstateイベントが追加され、 Ajaxのような実際にページ遷移しない場合でも、ページの変化があるごとに、URLを変更して履歴を追加することができるようになりました。この機能はIE10以上のブラウザで利用することができます。今回は、この機能を使ったページ遷移の方法をご紹介いたします。 ↓作ってみたもの DEMO 方法遷移するそれぞれのページを、Ajax経由ではなく、直接開いても問題ない状態で用意する初期で読み込んだページのURLを取得し、pushState(