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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

意見交換

クローズ

23回答

11727閲覧

ブラウザーバックを効かないようにする方法はありますか。

eisaku123

総合スコア73

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

6クリップ

投稿2023/04/13 01:47

0

6

実現したいこと

ある案件で初めてphpでwebアプリを開発をしてます。
chromeなどで左上にある戻るボタンを押すとブラウザーバック問題が起きて困ったことはありませんか?

実現したいことは「ブラウザーの左上にある戻るボタンを押しても反応しなく、webアプリ上の戻るで遷移をさせたい」
です。
単純に<head>タグの辺でおまじないを記述したり、javascriptで記述する方法があるのでしょうか?

ご教授、よろしくお願いします。

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

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

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

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

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

回答23

#1

quiz

総合スコア258

投稿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

pippi19

総合スコア679

投稿2023/04/13 02:06

JSのhistory制御では完全に制限する事はできないと思います。
全環境でネイティブ機能を抑える事はできないからです。

個人的には、そもそも1ページにしてしまうことで実現できると思います。
1ページしかないのでブラウザによる進む・戻るという概念をなくしてしまうという発想です。

各ページで固有にURLを持たせる必要がなければ、
フロントをSPAに近い実装にすることでいけると思います。

1画面内でユーザーアクションによって画面内の要素を書き換える(hostory操作は走らせない)
PHPの処理が必要な部分はAPI化して非同期で。

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

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

#3

eisaku123

総合スコア73

投稿2023/04/13 02:33

編集2023/04/13 02:45

#1
GPT-4manさんご教授ありがとうございます。
しかし、提供していただいたコードをコピペして、ブラウザーの戻るを押すと戻ってしまいます。(泣く)

また、私の既存のところにコピペしても戻ってしまいます。
ただし、少し変わった現象があり、タブが5つ並んでして、選択して、戻るを押すと戻りません。

GPT-4manさんの方では試されましたでしょうか?

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

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

#4

eisaku123

総合スコア73

投稿2023/04/13 02:40

#2
NKTIDKSGさんご教授ありがとうございます。
経験上そのような意見は確かにそうです。

しかし、開発が半分以上、進んでしまい、手戻りするには容易ではない状況になりつつあります。

「全環境でネイティブ機能を抑える事はできないからです。」
とおっしゃられてますが、chromeとsafalyは抑えることはできるのでしょうか?

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

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

#5

rtewd

総合スコア11

投稿2023/04/13 03:57

編集2023/04/13 03:59

#2
TwitterのようなSPA仕様でも戻るボタンで前のページに戻れるような気がするのは気のせいでしょうか?

>1ページしかないのでブラウザによる進む・戻るという概念をなくしてしまうという発想です。

SPAだからといってその無くす概念が正しいともいえない、寧ろ、あったほうがいいように思うのですが、、、
ご意見いただけないでしょうか

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

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

#6

a.com

総合スコア871

投稿2023/04/13 04:32

ブラウザバックできないブラウザを使うしか無いと思います

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

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

#7

yambejp

総合スコア114390

投稿2023/04/13 05:17

chrome系は画面を一度クリックするなどユーザーに作業をさせないと戻れてしまいます
これは悪質なサイトへの対応のようですのでchromeの考え方が変わらない限り
戻れるのは仕方ないことでしょう。
たとえばなんらかの方法でユーザーにクリックさせる仕組みをつければ可能といえば可能でしょうね

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

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

#8

miyabi_takatsuk

総合スコア9528

投稿2023/04/13 05:18

現状、いかなる手法でも、そのような実装は、完全には行うことができません。
ブラウザのポリシーとして、極力ユーザーの意図していない挙動はさせない、ということがあるからです。

そもそもなぜ、

ブラウザーの左上にある戻るボタンを押しても反応しなく、webアプリ上の戻るで遷移をさせたい

としたいのでしょうか。
その理由によって、実装方法の工夫で、実現できる可能性があります。

また、ブラウザバックは、特にAndroid機種は、ブラウザ以前に、端末自体にバックボタンがありますので、
ブラウザ上防げたとしても、そちらは防ぎようがありません。

なので、a.comさんの提示されている方法か、
やはり大事なのが、
ブラウザバックボタンと、Webアプリ上の戻るボタンでの挙動を統一できるよう実装することではないでしょうか。

多くのエンジニアが悩む部分ではありますが、
その多くのエンジニアは、上記に帰着します。
(ブラウザの、Webのポリシーとセキュリティ概念によっての、ブラウザの仕様がある限り)

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

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

#9

pippi19

総合スコア679

投稿2023/04/13 06:05

#5

TwitterのようなSPA仕様でも戻るボタンで前のページに戻れるような気がするのは気のせいでしょうか?

気のせいではありません。
TwitterはSPAですので、意図的に戻れるようにしています。

私が提案したのはSPAに近い実装です。
あくまで1ページ内での要素の書き換え、物理遷移も仮想繊維もさせない実装という提案です。

SPAだからといってその無くす概念が正しいともいえない、寧ろ、あったほうがいいように思うのですが、、、

はい、一般論で言えばUX観点ではその通りだと思います。
ただし今回は質問者による下記の要件がありますので。

実現したいことは「ブラウザーの左上にある戻るボタンを押しても反応しなく、webアプリ上の戻るで遷移をさせたい」

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

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

#10

eisaku123

総合スコア73

投稿2023/04/13 07:06

皆様、ありがたい、アドバイスありがとうございます。
まず、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

yambejp

総合スコア114390

投稿2023/04/13 07:23

編集2023/04/13 07:29

#10

一応私の案に少し興味がありそうですので、具体的にはこんなかんじ

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

pippi19

総合スコア679

投稿2023/04/13 07:54

#10

「全環境でネイティブ機能を抑える事はできないからです。」
とおっしゃられてますが、chromeとsafalyは抑えることはできるのでしょうか?

Win/Mac/iOS/Androidの純粋な最新版Chrone、
Mac/iPhoneのSafariのみに限定(派生系やWebViewなどを含まない)すればやり方はあるかもしれません。

個人的には厳しいように思いますが、他の方の回答を参考にしてください。

しかし、開発が半分以上、進んでしまい、手戻りするには容易ではない状況になりつつあります。

であれば荒技ですが、
いっそのこと1枚のページ内にiframeでそのWebアプリを埋め込んでしまえば理論上戻れなくなりますね。
右クリックできなくすればより戻りにくくなると思います。

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

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

#13

eisaku123

総合スコア73

投稿2023/04/13 07:56

#11
yambejpさんご提示ありがとうございます。
ご提示いただいた「画面でOKボタンを押してください」のOKボタンを人が押すと戻るボタンが起動しない制御になる仕組みでよろしいでしょうか。
この方法は良いアイデアで私も案は浮かんでました。

人を介さない方法はあるのでしょうか?

イメージ説明

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

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

#14

yambejp

総合スコア114390

投稿2023/04/13 08:05

編集2023/04/13 08:10

#13

OKボタンを人が押すと戻るボタンが起動しない制御になる仕組み

そういう想定で例示しましたが、そうなっていませんか?
別にOKで閉じることが目的ではなく、画面上の何かをクリックしたら
pushStateした挙動が有効になるということです。

人を介さない方法はあるのでしょうか?

強制的にdialogのbuttonをclickしても、触ったことにはならないのでだめですね
そもそも「人を介すことが必須」だからこういうUXになっているわけですから
あくまでも姑息な手段ということなので。

たとえばdialogでなくても、なにかアイコン的なものをだして、
「クリックしたらスタートします」のような仕組みにすれば挙動は同じでしょう

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

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

#15

eisaku123

総合スコア73

投稿2023/04/13 08:08

#13
yambejpさん、結論を述べていただきありがとうございます。
もう少しあがいてみてます。

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

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

#16

yambejp

総合スコア114390

投稿2023/04/13 08:29

#15

たとえばユーザーに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">

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

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

#17

eisaku123

総合スコア73

投稿2023/04/13 08:56

#12
NKTIDKSGさん色々とアドバイスありたとうございます。
荒技 ifameという方法は思い浮かびませんでした。

右クリックできなくすればより戻りにくくなると思います。

何か方法はあるのでしょうか。

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

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

#18

pippi19

総合スコア679

投稿2023/04/13 09:05

#17
下記で行けるような気がしましたが、
一度iframeにフォーカスしてしまうと、ブラウザバック時の挙動が親ではなく子のiframeに映ってしまうようでした。ダメですね。(Chromeで確認)

html

1<iframe src="https://teratail.com/questions/691hs6js28v67o" frameborder="0" style="width:100vw;height:100vh"></iframe>

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

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

#19

eisaku123

総合スコア73

投稿2023/04/13 09:17

#18
NKTIDKSGさんご確認ありがとうございます。
私も確認しました。残念、戻ってしまいますね。泣く
また何か良いアイデアがあればよろしくお願いします。

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

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

#20

eisaku123

総合スコア73

投稿2023/04/13 11:53

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

そもそもなぜ、
ブラウザーの左上にある戻るボタンを押しても反応しなく、webアプリ上の戻るで遷移をさせたい
としたいのでしょうか。

注文サイト作ってまして、POSTで遷移して戻るとダイアログが表示されるからそれを出さないようにしたいからです。

ブラウザバックボタンと、Webアプリ上の戻るボタンでの挙動を統一できるよう実装する

恐れ入りますが、今までの経験で具体的にどういう違いがあって挙動を統一されたことがあるのでしょうか?

ご教示お願いします。

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

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

#21

eisaku123

総合スコア73

投稿2023/04/13 11:57

#16
yambejpさん、さらにご提案ありがとうございます。全体を透明のボタンもありですね。

あと、理想なのが、最初のindex.htmlでボタンを押したら次のページ以降ずっと戻るボタンを押せないような方法って考えられますでしょうか?

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

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

#22

pippi19

総合スコア679

投稿2023/04/13 12:43

編集2023/04/13 12:44

注文サイト作ってまして、POSTで遷移して戻るとダイアログが表示されるからそれを出さないようにしたいからです。

formタグを使っている状況だと思います。

昔は多かったですが、最近そのような問題もあり、
JavaScriptからajaxやfetchでPOSTするのが一般的だと思います。

ブラウザバック問題を防げるだけでなく、エラーハンドリングもしやすいです。
PHPのレスポンスをjsonに変えるだけですので、そこまで改修も大きくないかと。

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

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

#23

maisumakun

総合スコア145025

投稿2023/04/13 13:39

POSTした結果をそのまま表示するのではなく、リダイレクトを挟んでGETで次の画面を表示させることで、リロードやブラウザバックの際にPOSTの結果を使う箇所を回避する、「PRGパターン」と呼ばれるような手法もあります。

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

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

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問