jquery loadでページを読み込んだ後のブラウザバック

jQuery初心者です。

ヘッダとナビを設置したindex.htmlにコンテンツのhtmlをloadするサイトを作っています。
index.htmlにJquery初期設定でtop.htmlをloadし、その後ナビで選択、A.html B.htmlをloadするようにしています。
そして、loadしたA.htmlの中にリンクを設定してPDFを表示する箇所があるのですが、targetを_selfに設定していると、ブラウザバックをした時にsafari,fierfoxではA.htmlの表示されたページに戻るのですが、chromeでは初期設定のtop.htmlのページになります。

index.htmlに設置されたjQueryを再度読むか読まないかの差だということまでは理解できるのですが、解決法がわかりません。
chromeでも他のブラウザのように、A.htmlに戻りたいのですがどうすればいいのでしょうか。
よろしくお願いします。

No.2 回答者： takkun3728 回答日時： 2015/07/30 13:04

もし、読み込み時やイベントの記述法を変えてもうまくいかず、なおかつ、どうしてもload（）でということであれば、「cookieを使って、ブラウザに状態を覚えこませる方法」が、うまくいくかどうかは未確認ながら、検討の余地があるかもしれません。

具体的には、ナビで移動するたびに、その情報をcookieに入れ、読み込み時(document ready時）にはその情報を見て、そのページを出すようにする、というものです。

これなら、戻るボタン後にJSの状態が保持されるブラウザなら、そのままでいいわけですし、再度読み込み（初期化）されてしまうブラウザは、上記のCookieでカバーできるかもしれません。

Cookieは下記のような方法で簡単に実装できると思います：
http://www.tam-tam.co.jp/tipsnote/javascript/pos …

注意点としては、戻るボタンで戻った時だけでなく、普通にアクセスした時などにも、最後に表示した（=cookieに保存されている）ページが出てきてしまいかねませんので、Cookieの有効期限を、ブラウザを閉じるまでにするなど、対策が必要と思います。

・・・あと、ナビで移動する以外にも、ページ内に「ホームページに戻る」ようなリンクがある場合は、それもナビ同様、JSにする必要が出てきますね。。

私としてはやはり、No1でご回答した原始的な構成をお勧めしたいところですが、load（）で表示する方式をお採りになる合の一つのアイデアとして、ご参考になれば幸いです。

この回答へのお礼

色々とご親切にありがとうございます。
あれからトライしています。
なかなか技術が間に合わず怪しい動きですが，引き続き修正を加えてみます。
結果報告をしたかったのですが，時間がたってしまいましたので，一旦お礼をさせて頂こうと思いました。
教えて頂いたdreamweaverの方法も平行して検討していきます。

ありがとうございました。

お礼日時：2015/08/05 11:20

No.1 回答者： takkun3728 回答日時： 2015/07/29 11:06

こんにちは。

これは恐らく、戻るボタン後のJSの状態をどうするかという件のようですね。

具体的なコードが分からないので、未確認の推測ですが、まずは初期設定(ロード時のことですよね)コードと、ナビ選択時のイベントコードを書く場所や、書き方によって、改善できるかどうか試してみることをお勧めします。

その点では、ひょっとしたら下記の記事が参考になるかも知れません:
http://qiita.com/dayflower/items/5a8182b85ad3602 …
(この場合はChromeやFirefoxはOK、IEだけNGのようですが)

下記の記事は逆に戻るボタン後の状態を初期で統一したい場合のようですが、やはり参考になる可能性があります。
http://nmi.jp/archives/273

ただ、一点だけ、そもそも論になってしまうのですが、こういうのは、一旦うまくいっても、ブラウザによっての挙動が将来的にあまり安定しない可能性もありますので、もしこの構成で本格的なサイトを作られる予定の場合は、根本的な構成変更を検討された方が良いかも知れません。

具体的には、各ページを普通にナビごと用意して、ナビでの移動はJSを使わずに、シンプルなリンクにするという、ごく単純で原始的な構成です。

同じようなナビがあるHTMLをページ分用意するのは、一見すると冗長ですが、一定規模になるとdreamweaverなどで一括更新するなど、更新作業がさほど苦にならない方法もあります。また、Webシステムが好きであれば、PHPなどで共通部分をまとめてしまう方法もあります。SEO的にもJSで移動するより普通のリンクの方が良いと思います。

上記はいずれも個人的な所感ですので、間違いなどありましたら恐縮ですが、ご参考になれば幸いです。

この回答へのお礼

takkun3728さん、ありがとうございます。
おっしゃる通りです。
$(document).ready(
function(){
$('ul.navi li:first>a').addClass('selected');　①
$('.content').load(
$('ul.navi li:first>a').attr('href'));

$('ul.navi a').click(function(e){ 　　　　　②
var ss=$(this).parents('li').children('a')
if($(this).hasClass('pass')){
e.preventDefault();
} else if (!$(this).hasClass('selected')){
$('ul.navi a').removeClass('selected');
$(ss).addClass('selected');
$('.content').load($(this).attr('href'));
}
else {
$(ss).addClass('selected'); //
$('.content').load($(this).attr('href'));
}
e.preventDefault();
});
});
としてまして、.content部にロードするという方法なのですが、ブラウザバックをすると、safari等ですと②の選択時に戻るのですが、
chormは①まで戻るのか初期に設定しているホームのページをロードしてしまいます。
教えたいだだいたページを参考にもう少し考えてみます。
　それと共にアドバイスも有難うございます。一つ一つのページにナビを埋め込むという方法を以前は取っていたのですが、load（）で
表示する方がスマートなのでは、、とやってみていました。単純に便利だな、と思って作り始めたのですが、このような分からない事が出てきて頭を抱えています。
自身の力量も比較して検討してみます。有難うございました。

お礼日時：2015/07/29 22:57