0
6
実現したいこと
ある案件で初めてphpでwebアプリを開発をしてます。
chromeなどで左上にある戻るボタンを押すとブラウザーバック問題が起きて困ったことはありませんか？
実現したいことは「ブラウザーの左上にある戻るボタンを押しても反応しなく、webアプリ上の戻るで遷移をさせたい」
です。
単純に<head>タグの辺でおまじないを記述したり、javascriptで記述する方法があるのでしょうか？
ご教授、よろしくお願いします。
回答23件
#1
総合スコア269
投稿2023/04/13 01:52
「ChatGPT(GPT-4)]により生成された文章です」
ブラウザの戻るボタンを無効化することは一般的には推奨されませんが、あくまでどうしても実装したい場合には、JavaScriptを使用してブラウザの履歴を操作する方法があります。
以下に、ブラウザの戻るボタンの動作を無効化するJavaScriptのコード例を示します。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Disable Browser Back Button</title> 7 <script> 8 window.history.pushState(null, "", window.location.href); 9 window.onpopstate = function() { 10 window.history.pushState(null, "", window.location.href); 11 }; 12 </script> 13</head> 14<body> 15 <h1>Disable Browser Back Button</h1> 16 <a href="https://www.example.com">Go to example.com</a> 17</body> 18</html>
このコードでは、window.history.pushStateを使って現在のURLを履歴に追加し、window.onpopstateイベントを使用してブラウザの戻るボタンが押されたときに再び現在のURLを履歴に追加しています。これにより、戻るボタンが押されても、常に現在のページに留まるようになります。
ただし、ブラウザの戻るボタンの無効化はユーザビリティを損なう可能性があるため、通常は避けるべきです。代わりに、アプリケーションのロジックやナビゲーションを改善することで、ブラウザバック問題を解決することが推奨されます。
#2
総合スコア679
投稿2023/04/13 02:06
JSのhistory制御では完全に制限する事はできないと思います。
全環境でネイティブ機能を抑える事はできないからです。
個人的には、そもそも1ページにしてしまうことで実現できると思います。
1ページしかないのでブラウザによる進む・戻るという概念をなくしてしまうという発想です。
各ページで固有にURLを持たせる必要がなければ、
フロントをSPAに近い実装にすることでいけると思います。
1画面内でユーザーアクションによって画面内の要素を書き換える（hostory操作は走らせない）
PHPの処理が必要な部分はAPI化して非同期で。
#3
#1
GPT-4manさんご教授ありがとうございます。
しかし、提供していただいたコードをコピペして、ブラウザーの戻るを押すと戻ってしまいます。(泣く)
また、私の既存のところにコピペしても戻ってしまいます。
ただし、少し変わった現象があり、タブが5つ並んでして、選択して、戻るを押すと戻りません。
GPT-4manさんの方では試されましたでしょうか？
#5
総合スコア11
投稿2023/04/13 03:57
編集2023/04/13 03:59#2
TwitterのようなSPA仕様でも戻るボタンで前のページに戻れるような気がするのは気のせいでしょうか？
＞1ページしかないのでブラウザによる進む・戻るという概念をなくしてしまうという発想です。
SPAだからといってその無くす概念が正しいともいえない、寧ろ、あったほうがいいように思うのですが、、、
ご意見いただけないでしょうか
#6
総合スコア871
投稿2023/04/13 04:32
ブラウザバックできないブラウザを使うしか無いと思います
#7
総合スコア114825
投稿2023/04/13 05:17
chrome系は画面を一度クリックするなどユーザーに作業をさせないと戻れてしまいます
これは悪質なサイトへの対応のようですのでchromeの考え方が変わらない限り
戻れるのは仕方ないことでしょう。
たとえばなんらかの方法でユーザーにクリックさせる仕組みをつければ可能といえば可能でしょうね
#8
総合スコア9528
投稿2023/04/13 05:18
現状、いかなる手法でも、そのような実装は、完全には行うことができません。
ブラウザのポリシーとして、極力ユーザーの意図していない挙動はさせない、ということがあるからです。
そもそもなぜ、
ブラウザーの左上にある戻るボタンを押しても反応しなく、webアプリ上の戻るで遷移をさせたい
としたいのでしょうか。
その理由によって、実装方法の工夫で、実現できる可能性があります。
また、ブラウザバックは、特にAndroid機種は、ブラウザ以前に、端末自体にバックボタンがありますので、
ブラウザ上防げたとしても、そちらは防ぎようがありません。
なので、a.comさんの提示されている方法か、
やはり大事なのが、
ブラウザバックボタンと、Webアプリ上の戻るボタンでの挙動を統一できるよう実装することではないでしょうか。
多くのエンジニアが悩む部分ではありますが、
その多くのエンジニアは、上記に帰着します。
（ブラウザの、Webのポリシーとセキュリティ概念によっての、ブラウザの仕様がある限り）
#9
総合スコア679
投稿2023/04/13 06:05
TwitterのようなSPA仕様でも戻るボタンで前のページに戻れるような気がするのは気のせいでしょうか？
気のせいではありません。
TwitterはSPAですので、意図的に戻れるようにしています。
私が提案したのはSPAに近い実装です。
あくまで1ページ内での要素の書き換え、物理遷移も仮想繊維もさせない実装という提案です。
SPAだからといってその無くす概念が正しいともいえない、寧ろ、あったほうがいいように思うのですが、、、
はい、一般論で言えばUX観点ではその通りだと思います。
ただし今回は質問者による下記の要件がありますので。
実現したいことは「ブラウザーの左上にある戻るボタンを押しても反応しなく、webアプリ上の戻るで遷移をさせたい」
#10
皆様、ありがたい、アドバイスありがとうございます。
まず、yambejpさんのご提案(自動でボタンを押させる)で以下のコードを書きました。
結果は戻ってしまいました。泣く
そこでボタンが効いているかどうか、手動で押すと、戻らなくなります。
他の記述方法はあればご教示お願いします。
window.onload = function() { document.getElementById("abc").click(); console.log("ボタンが押されましたよ"); }; window.addEventListener('load', function() { // 履歴を変更する window.history.pushState(null, "", window.location.href); // ブラウザーの「戻る」ボタンを無効にする window.onpopstate = function() { window.history.pushState(null, "", window.location.href); }; });
#11
総合スコア114825
投稿2023/04/13 07:23
編集2023/04/13 07:29一応私の案に少し興味がありそうですので、具体的にはこんなかんじ
javascript
1<script> 2window.addEventListener('popstate', ()=>{ 3 history.pushState(null, null, null); 4}); 5window.addEventListener('DOMContentLoaded', ()=>{ 6 const dlg=document.querySelector('dialog'); 7 history.pushState(null, null, null); 8 btn.addEventListener('click',()=>{ 9 history.go(-2); 10 }); 11 dlg.addEventListener('close', () => { 12 if(dlg.returnValue!="ok" ){ 13 dlg.showModal(); 14 } 15 }); 16 dlg.showModal(); 17}); 18</script> 19<dialog> 20<form method="dialog"> 21OKボタンを推してください 22<button type="submit" value="ok">OK</button> 23</form> 24</dialog> 25<input type="button" id="btn" value="btn"> 26
#12
総合スコア679
投稿2023/04/13 07:54
「全環境でネイティブ機能を抑える事はできないからです。」
とおっしゃられてますが、chromeとsafalyは抑えることはできるのでしょうか？
Win/Mac/iOS/Androidの純粋な最新版Chrone、
Mac/iPhoneのSafariのみに限定（派生系やWebViewなどを含まない）すればやり方はあるかもしれません。
個人的には厳しいように思いますが、他の方の回答を参考にしてください。
しかし、開発が半分以上、進んでしまい、手戻りするには容易ではない状況になりつつあります。
であれば荒技ですが、
いっそのこと1枚のページ内にiframeでそのWebアプリを埋め込んでしまえば理論上戻れなくなりますね。
右クリックできなくすればより戻りにくくなると思います。
#14
総合スコア114825
投稿2023/04/13 08:05
編集2023/04/13 08:10OKボタンを人が押すと戻るボタンが起動しない制御になる仕組み
そういう想定で例示しましたが、そうなっていませんか？
別にOKで閉じることが目的ではなく、画面上の何かをクリックしたら
pushStateした挙動が有効になるということです。
人を介さない方法はあるのでしょうか？
強制的にdialogのbuttonをclickしても、触ったことにはならないのでだめですね
そもそも「人を介すことが必須」だからこういうUXになっているわけですから
あくまでも姑息な手段ということなので。
たとえばdialogでなくても、なにかアイコン的なものをだして、
「クリックしたらスタートします」のような仕組みにすれば挙動は同じでしょう
#16
総合スコア114825
投稿2023/04/13 08:29
たとえばユーザーにdialogを意識させないUI
javascript
1<style> 2dialog[open]{ 3width:100%; 4height:100%; 5border:0; 6display:flex; 7justify-content:center; 8align-items: center; 9} 10dialog [type=submit]{ 11display:none; 12} 13</style> 14<script> 15window.addEventListener('popstate', (e)=>{ 16 history.pushState(null, null, null); 17}); 18window.addEventListener('DOMContentLoaded', ()=>{ 19 const dlg=document.querySelector('dialog'); 20 history.pushState(null, null, null); 21 btn.addEventListener('click',()=>{ 22 history.go(-2); 23 }); 24 dlg.addEventListener('click', () => { 25 dlg.querySelector('[type=submit]').click(); 26 }) 27 dlg.addEventListener('close', () => { 28 if(dlg.returnValue!="ok" ){ 29 console.log(dlg.returnValue) 30 dlg.showModal(); 31 } 32 }); 33 dlg.showModal(); 34}); 35</script> 36<dialog> 37<form method="dialog"> 38push start 39<button type="submit" value="ok">OK</button> 40</form> 41</dialog> 42<input type="button" id="btn" value="btn">
#22
総合スコア679
投稿2023/04/13 12:43
編集2023/04/13 12:44注文サイト作ってまして、POSTで遷移して戻るとダイアログが表示されるからそれを出さないようにしたいからです。
formタグを使っている状況だと思います。
昔は多かったですが、最近そのような問題もあり、
JavaScriptからajaxやfetchでPOSTするのが一般的だと思います。
ブラウザバック問題を防げるだけでなく、エラーハンドリングもしやすいです。
PHPのレスポンスをjsonに変えるだけですので、そこまで改修も大きくないかと。
#23
総合スコア145183
投稿2023/04/13 13:39
POSTした結果をそのまま表示するのではなく、リダイレクトを挟んでGETで次の画面を表示させることで、リロードやブラウザバックの際にPOSTの結果を使う箇所を回避する、「PRGパターン」と呼ばれるような手法もあります。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。