重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

詳しい人求む！

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

解決済

  • 質問者：denza
  • 質問日時：
  • 回答数：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/

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

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に未対応なため動作しません。
　　（記述法をかえることで対応は可能）
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2018/12/17 01:35

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



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

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

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

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


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

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

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

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

参考になりました。

通報する
お礼日時：2018/12/13 18:31

No.1

  • 回答者： zircon3
  • 回答日時：

history.back()はこのコードが実行されるWebブラウザの画面遷移の履歴で1つ前に戻る、、、つまりWebブラウザのウィンドウ上部などにあるBackボタン（←ボタン）を押すのと同じです。


お使いのWebブラウザでBackボタンを長押しするなどして表示される履歴の1つ前がGoogleの検索結果画面になっていませんか？
つまりご自身が「1つ前の画面」と思っておられる画面はURLを直接入力して表示した画面であるため画面遷移の履歴になっていないとかです。

参考まで。
    • good
    • 1
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

そうなのですが、クロームとEdgeで挙動が違うのです。
なんだろう。

通報する
お礼日時：2018/12/13 18:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報