詳しい人求む！

Javascriptのhistory.back()がうまく動かない

解決済

質問者：denza
質問日時：2018/12/12 13:23
回答数：3件

2年位前までは問題なかったのですか、
とあるぺージーでJavascriptでdocument.writeで計算結果を出すページがあります。

15年ほど前にJavascriptもろくにわからず、作ったのですが、
onclick=history.back()で元の計算入力画面に戻らず、googleの検索結果まで戻ってしまいます。

ブラウザの解釈が違うことになったのかもしれませんが、元の計算入力画面へ戻すにはどうしたらよいでしょうか？
document.write ("<br>","<input type=button value=もう一度計算する！ onclick=history.back()>","</br>");

作りがめちゃくちゃなことは否定しませんが、どうぞこの低能な私にアドバイスお願いします。
そのページ（私のページなのでリンクを書きます）
http://delorean2.cool.coocan.jp/

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2018/12/14 11:06

No2です

Location.replace(url);
で、直接指定しても動作しませんか？
https://developer.mozilla.org/en-US/docs/Web/API …

あるいは、念のためにタイムスタンプをクエリに追加しておくとか…

まぁ、わざわざ遷移する必要も無いような内容の印象ですので、No2の3）のような解決法が簡単そうな気もしますが…
【表示切替の一例】
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
.page { padding:1em; background-color:#FFC; }
.page.hide { display:none; }
.trigger{ margin:16em 0 1em 1em; }
</style>

<script type="text/javascript">
/* 表示の切り替え */
document.addEventListener("click", (e)=>{
let t = e.target;
if(t.nodeName == "INPUT" && t.classList.contains("trigger")){
document.querySelectorAll(".page").forEach((el)=>{
el.classList.toggle("hide");
});
}
});
</script>
</head>
<body>
<div class="page">
<h4>◇ 入力の表示</h4>
<input type="button" class="trigger" value="計算結果へ" />
</div>

<div class="page hide">
<h4>◇ 結果出力の表示</h4>
<input type="button" class="trigger" value="戻る" />
</div>
</body>
</html>

注） IEはアロー関数やforEachに未対応なため動作しません。
　　（記述法をかえることで対応は可能）

- 0
- 件

通報する

この回答へのお礼

Location.replace(url)試したのですが、駄目でした。

せっかく書いていただいた文はちょっと理解できません。
少し勉強しないとダメかもです。
ひとまずありがとうございました。

通報する

お礼日時：2018/12/17 01:35

参考程度に

No.2

回答者： fujillin
回答日時：2018/12/12 14:27

こんにちは

理解なさっているかどうかわかりませんが、計算結果の表示には「ページを遷移」しているわけではなく「文書を上書きで書き直す」という方法になっています。
ですので、ブラウザのアドレスバー内の表示は変わっていないはずと思います。

これでは履歴には残らないだろうと思って簡単に試してみたところ、ブラうザによって反応が異なるようです。
手元のIE、Fxでは戻れるようですが、Chromeは反応しません。

対処法としては、
1）きちんと遷移して、履歴に残るようにする
2）history.backではなく、reloadやlocation.hrefで再ロードさせる
3）同一ページ内で処理するのであれば、結果を上書き（＝元の内容が消去される）せずに、タブ表示などと同様に表示/非表示の切り替えで対処する

などの方法をとることで、一応、目的は達せられるのではないかと思います。

>作りがめちゃくちゃなことは否定しませんが、～～
「作りがめちゃくちゃ」であれば、思うように動作しなくても仕方がないのではないでしょうか？
もしそうなのなら、そのあたりを「めちゃくちゃ」ではなくすることから始めた方が宜しいかと。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
確かにブラウザによって挙動が違い、
reloadを使うとクロームブラウザでは今く動くけど、EdgeではNG。
location.hrefだとうまくいきません。

その当時はフレーム内で、別のhtmで動かしていたのでうまくいっていたのですが。。。
今フレーム動かないみたいだし。

作りは良くないですが、時代が更に悪くした部分もあります。
場当たり的でも動けばと思ったのですが、クロームとEdgeで両立させるにはこのままでは無理かもしれません。

参考になりました。

通報する

お礼日時：2018/12/13 18:31