質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

800閲覧

ブラウザの履歴を、「指定した通り」に取得する方法はありますか?

massuguda

総合スコア23

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/02/21 00:40

PJAXの実装にあたり、ブラウザの「戻る」「進む」に対応させたいのですが、

履歴情報を「指定した通り(文末に記載)」に取得するにはどうしたらいいのでしょうか?

具体的には、下記の最後の方にある「// どうやって取得するのか?」がわかりません。

jquery

1// PJAXさせる関数 2function my_pjax1(url) { 3 $.ajax({ 4 type: 'GET', 5 url: url, 6 dataType: 'html' 7 }) 8 .done(function(data) { 9 // 取得 10 var contentItems = $(data).find('#main'); 11 // 追加 12 $('#main').html(''); 13 $('#main').html(contentItems); 14 // 履歴 15 history.pushState('', '', url); 16 }) 17 .fail(function () { 18 alert('error'); 19 }); 20} 21 22// PJAX実行(「ページ内のリンク」をクリックした場合) 23$(document).on("click","a.ajax", function(e){ 24 e.preventDefault(); 25 var url = $(this).attr('href'); 26 my_pjax1(url); 27}); 28 29// PJAX実行(「戻る」「進む」をクリックした場合) 30window.addEventListener("popstate", function() { 31 var url = ; // どうやって取得するのか? 32 my_pjax1(url); 33});

上記の「// どうやって取得するのか?」では、次のような複雑な指定による取得が必要かと思うのですが、みなさんどうされているのでしょうか?

■「戻る」のときに取得する履歴
→同じドメインで、現在のURLの1つ前の履歴を取得する。

■「進む」のときに取得する履歴
→同じドメインで、現在のURLの1つ後の履歴を取得する。

具体的な方法をご存知の方がいらっしゃいましたら教えて頂きたく思います。
どうぞ宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/02/21 00:46

進むにしてても戻るにしても既にアクセスしている前提ですよね?
massuguda

2019/02/21 00:54 編集

はい。というか初めてのアクセスでは質問の■の取得方法で該当するURLがないと思います。
guest

回答2

0

ベストアンサー

この記事そのまんまでは?

投稿2019/02/21 00:48

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

massuguda

2019/02/21 00:54 編集

あの、これ↓をお聞きしたいんですけど、そちらの記事のどこかに書いてありますか? var url = ; // どうやって取得するのか?
m.ts10806

2019/02/21 00:58

$(window).on('popstate', function(e){ if (!e.originalEvent.state) return; // 初回アクセス時に再読み込みしてしまう対策 loadContents(location.pathname); }); location.pathname ←これ
m.ts10806

2019/02/21 01:00

もしそれでも難しければ localStorageに常に「1つ前のURL」「1つ後のURL」を更新するようにしておいて使う、でも良いですけど。
massuguda

2019/02/21 01:10

あっ、申し訳ございません。 「location.pathname」という関数が定義しなくてもあったんですね。 以下のように初回アクセス時のコードがあるとできなくなるのですが、なぜだと思われますか? ---------- できた↓ // PJAX実行(「戻る」「進む」をクリックした場合) $(window).on('popstate', function(e){ var url = location.pathname; // こうやって取得する! my_pjax1(url); }); できない↓ // PJAX実行(「戻る」「進む」をクリックした場合) $(window).on('popstate', function(e){ if (!e.originalEvent.state) return; // 初回アクセス時に再読み込みしてしまう対策 var url = location.pathname; // こうやって取得する! my_pjax1(url); });
m.ts10806

2019/02/21 01:13

状況によりですし提示情報だけでは こちらでは再現できないので、originalEventをconsole.log()で確認してみるしかないと思います。
massuguda

2019/02/21 01:20

$(window).on('popstate', function(e){ console.log(originalEvent); }); で originalEvent is not defined とコンソールに出ました。 かなり意味不明です。リンク先にはどこにも「originalEvent」など定義していませんから、これも「location.pathname」と同様に定義しなくても使える関数なのかと思うのですが、なぜ…
m.ts10806

2019/02/21 01:24

よく見てください。 e.originalEvent です。 event内にあるものですよ。
massuguda

2019/02/21 01:39 編集

コンソールでました。「state」の値が「空」でした。だからできなかったんですね。 ということは…あ、なるほど。 リンク先には push_state: 'true' があるので、たぶんこれを追加すれば行けそうな予感がします。 問題はこれの追加方法ですが、質問のコードに沿った形で追加する場合、どのような書き方になると思われますか? こちら↓では「state」は「空」ではありませんが「null」になってしまいまして。 // PJAXさせる関数 function my_pjax1(url) { $.ajax({ type: 'GET', url: url, dataType: 'html', push_state: 'true' // ここに追加したけど「null」になってしまう }) // 以下省略
massuguda

2019/02/21 03:46 編集

おおおお!ありがとうございます。 history.pushState('', '', url); ↓こうしたら、「state」は「空」でなく「Object { url: "http://example.com/test/" }」になりました。(これでいいんですよね?) if(url !== location.href) { history.pushState({url: url}, null, url); }
massuguda

2019/02/21 03:44

というか、かなりそもそもなんですけど、 こちら↓はなんの意味があるのでしょうか? if (!e.originalEvent.state) return; // 初回アクセス時に再読み込みしてしまう対策 あってもなくても初回アクセス時(そのドメインの履歴がないとき?)に、特に不具合は見当たらないのですが、本来であればどのような不具合が生じるはずなのですか?(「再読み込みしてしまう」という意味がわかりません。)
m.ts10806

2019/02/21 03:50

テストケースがかなり難しそうですがpopstateはブラウザの戻るボタンを感知するものですよね。 例えば同じタブで別のサイトにURL直打ちとかブックマークからとかで遷移したときに「戻る」をした場合に、変な再読み込みが発生してしまいそうに思います。 サーバー側の言語もあわせて使う場合、本来はブラウザ機能による操作は動作保証しないケースがほとんどのところをあえて対応しているため、念のために入れているようにも思います。 クライアントサイドである限り、ブラウザによって挙動は全く同じようにはなりませんしね。 同じブラウザでも設定とかキャッシュとかで同じ動きにならないこともありますし。
massuguda

2019/02/21 03:59

なるほど。別にいいやと匙を投げていたのですが、せっかくできましたし使い道も教えて頂いたので、やはり念のため書いておきます。最後まで長々とお付き合い頂き誠にありがとうございます。
m.ts10806

2019/02/21 04:03

解決されたようで何よりです。
guest

0

上記の「// どうやって取得するのか?」では、次のような複雑な指定による取得が必要かと思うのですが

locationオブジェクトから取得するだけです。(pjaxで自分から別ドメインの履歴を入れた場合は別として)違うドメインで遷移した場合、ページごと動いてしまうので無関係となります。

投稿2019/02/21 00:58

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

massuguda

2019/02/21 01:12

そうみたいですね。mts10806様にも参考サイトをご提示いただき、同じ関数を教えて頂きました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問