ブラウザの戻るボタンを無効にする

98

（ブラウザ間で）ブラウザの[戻る]ボタンを無効にする方法は？

asp.net  javascript 
— priyanka.sarkar
ソース
92
ユーザーのコンピューターやブラウザーを所有していません。
— インスタンスハンター、
47
+1ブラウザーの戻るボタンを無効にすることは「悪い習慣」であることに同意しますが、質問自体に反対票を投じる理由は見当たらず、答えて、なぜimoへの道なのかを説明します。
— ChristopheD
45
なぜ私たちはこの質問に敵対しているのですか？私たちが知っているすべてのことについて、この質問をする人は、これが不十分なユーザビリティプラクティスであることをすでに知っていますが、要件に従っているだけであるか、単に何かを学びたいだけかもしれません。これを架空の質問であると考えて、そのようなことをしたとしたらどうしたらよいのでしょうか。
— thomasrutter 2009年
5
やりたいこととは関係なく、絶対にやってはならないことがあります。このための交渉不可能な要件があることは、要件がビジネスを持たない人々によって設定されたことを即座に意味し、これははるかに大きな問題です。
— アナカタ09年
37
うーん、私はこれまでで最も素晴らしいコメントを書いたが、誤って戻るボタンを押したときにそれを失った。
— ダンウィリアムズ

回答:

26

この質問は、この非常によく似ている1 ...

これを機能させるには、キャッシュを強制的に期限切れにする必要があります。次のコードをページコードの背後に配置します。

Page.Response.Cache.SetCacheability(HttpCacheability.NoCache)
— RSolberg
ソース
14
ページをキャッシュ不可にしても、OPが望んでいたこと、つまり、戻るボタンを使用してページへのアクセスを無効にすることはできないことに注意してください。ブラウザが[戻る]ボタンを使用するときにキャッシュを使用しない場合でも（これらのブラウザはAFAIKを実行する必要がない）、そのページをリロードする方法を提供します（通常、警告ダイアログを表示した後）。そのため、ユーザーがそのページに戻ってほしくない場合は、そのページの要求がオリジンサーバーに到達する必要があるため、これはさらに悪くなる可能性があります。ページが再訪問されたことを検出するには、サーバー側の何かが必要になります。ヘッダーは無視できます。
— thomasrutter 2009
60

予想されるブラウザの動作を無効にしないでください。

あなたのページに、ユーザーが1、2ページ戻る可能性を処理させる。彼らのソフトウェアを不自由にしようとしないでください。

— ジョナサン・フィンランド
ソース
6
おかげで、AJAXアプリを作成している場合、戻るボタンを無効にするか、アプリを実行して、考えられるすべてのシナリオに対して適切なバックアクションを実行することの費用対効果のトレードオフが、無効になる傾向があるかもしれません。戻るボタンは、2つのオプションの中でより魅力的なものです。
— david.barkhuizen 2012
私はジョナサンに同意します。特に、現在インターネットに氾濫しているリダイレクトマルウェア広告の洪水については、彼らはすでにアラートシステムを悪用して、実際にページにロックする機能を与えずにページを離れることを難しくしています
— MikeT
46

JavaScriptを使用して戻るボタンを無効にする小さなハックを思いつきました。Chrome 10、Firefox 3.6、IE9で確認しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>

何してるの？

コメントから：

このスクリプトは、ブラウザーがURLの "＃"記号以降のすべてを閲覧履歴の一部と見なすという事実を利用しています。機能：ページが読み込まれると、URLに「＃1」が追加されます。50ms後、「1」は削除されます。ユーザーが「戻る」をクリックすると、ブラウザはURLを「1」が削除される前の状態に戻しますが、同じWebページであるため、ブラウザでページを再読み込みする必要はありません。– Yossi Shasho

— ヨッシー社
ソース
1
このスクリプトは、ページが読み込まれるときにURLに「＃」を追加し、50ミリ秒ごとにURLに1を追加するように見えます。
— 灰999
6
このスクリプトは、ブラウザーがURLの "＃"記号以降のすべてを閲覧履歴の一部と見なすという事実を利用しています。機能：ページが読み込まれると、URLに「＃1」が追加されます。50ms後、「1」は削除されます。ユーザーが「戻る」をクリックすると、ブラウザはURLを「1」が削除される前の状態に戻しますが、同じWebページであるため、ブラウザでページを再読み込みする必要はありません。
— Yossi Shasho
1
URLは2回変更されることに注意してください。これは、実装を偽装するためだけに行うので、「1」を追加したことは誰にもわかりません。そのため、実際にはユーザーがクリックすると、ページはしばらくの間「＃1」を再度追加し、再び削除します。ところで-それは "1"である必要はなく、どんな文字列でもかまいません。
— Yossi Shasho
2
この問題は、ページが50ミリ秒ごとに一番上にスクロールすることです。ウィンドウの高さよりも大きいフォームがある場合、これによりフォームの値を入力することができなくなります。
— 3komma14
どうもありがとう。これは、私が持っているJavaScriptベースの特にインタラクティブなページに非常に役立ちます。ここでは、左右にスクロールすることがメカニズムの一部です。これにより、Mac OS Xでのスクロールジェスチャーがユーザーを誤ってページに「戻す」という問題を解消できます（既に完全にスクロールされている場合は、簡単に実行できます）。
— Iain Collins、
34

他の人は「これをしないでください」と言うためのアプローチをとっていますが、それは実際にポスターの質問に答えません。誰もがこれが悪い考えであることを知っていると仮定しましょうが、とにかくそれがどのように行われるのかについて興味があります...

ユーザーのブラウザーの[戻る]ボタンを無効にすることはできませんが、ユーザーが戻ったときにアプリケーションが壊れる（エラーメッセージが表示され、ユーザーに最初からやり直すように要求する）ようにすることはできます。

これを行うために私が見た1つのアプローチは、アプリケーション内およびすべてのフォーム内のすべてのURLでトークンを渡すことです。トークンはすべてのページで再生成され、ユーザーが新しいページをロードすると、前のページのトークンはすべて無効になります。

ユーザーがページをロードすると、ページには正しいトークン（前のページのすべてのリンク/フォームに与えられた）が渡された場合にのみ表示されます。

私の銀行が提供するオンラインバンキングアプリケーションは次のとおりです。戻るボタンを使用すると、リンクが機能しなくなり、ページを再読み込みできなくなります。代わりに、戻ることができないという通知が表示され、最初からやり直す必要があります。

— トーマスルッター
ソース
1
私の銀行は別のアプローチを取ります-それは完全にセッションを終了します。戻るボタンを使用することは、ログアウトすることと同じです。
— RobG、2012年
それは同じアプローチのように聞こえます。彼らはあなたが戻ってエラー状態を投げたことを検出しています。
— thomasrutter-
joomlaはトークンソリューションを回避します。トークンはすべてのページとすべてのフォームによって生成されます。実際、この方法には「ユーザーがページに多くの時間とどまるとトークンが期限切れになる」などの問題があります
— Matteo Bononi 'peorthyr'
1
誤解しないでください。この方法には多くの問題があります。私はそれをお勧めしません、それは通常それがどのように達成されるかについてだけ言っています。前のページから予想されるリンクの1つをたどっていないことを検出するために、ページ間で一意のトークンを渡し、セッションを終了するか、エラーを表示します。それは、戻るボタンを壊し、タブブラウジングを壊し、ブックマークやリンクの共有を壊し、そしてそれ以上に、何も問題を解決しません。
— thomasrutter 14年
問題が、ユーザーが[戻る]ボタンを使用しようとしたときに情報が失われたり、すでに壊れていたりする場合は、[戻る]ボタンを無効にする方が望ましい方法です。
— PoloHoleSet 2018
10

私が自分で答えを探している間、「ベストプラクティス」は...ブラウザーがそうであるように時代遅れです...（本当にブラウザーは醜い化石です）

最善の/最も安全なソリューションは、ブラウザがメソッド/リクエストを実装して、ユーザーがページにインターフェースを制御する機能を付与できるようにすることです。

どうして？私の現在のプロジェクトでは、100％JavaScriptで構築および制御されたインターフェイスを構築しています。ページの変更がないため、プロジェクトに戻るボタンはありません。（つまり、非常に高速で、更新のためにページがフラッシュされることはありません。実際のアプリケーションと同じように！）

インターフェイスを「ハイジャック」する機能がない理由はわかっていますが、理解しています。しかし、少なくともブラウザからそれを要求する機能が必要です！これは、ハイジャックの危険がなければ、本当に「ベストプラクティス」になります。

しかし、ブラウザはブラウザです。この点に関して、何か既存のことが起こるとは思いません。

— ステラデビル
ソース
1
100％同意しない、この機能は99％のWeb開発者にとって素晴らしいものですが、残りの1％はこの機能を悪用しますが、ウェブサイトがインターネットを使用する能力を制御することを許可するのは非常に危険です。クロスドメインリダイレクトスクリプトでは、このような不正行為のためにスクリプトの実行が許可されているかどうかを禁止または確認できるようにする必要があります
— MikeT
@MikeT-自分の特定のアプリケーションページに移動しているときに「戻る」ボタンを無効にすると、インターネットを使用するユーザーの能力がどのように阻害されますか？
— PoloHoleSet 19/07/19
@PoloHoleSetあなたがブラウザの戻るボタンを無効にする機能を持っているなら、誰もがそうです、あなたが行きたいと思わないページにあなたを送るための一つのリダイレクトと、ブラウザのナビゲーションコントロールを無効にすることができるかどうかあなたは脱出しますか？私は確かにあなたは今、彼らが実際に残してからあなたを防ぐことができ、そのサイトを想像して実在しないウイルスを削除するには、そのウイルスをインストールする彼らはプロンプト「あなたは、ウイルスのページを持っている」に遭遇してきたよ
— MikeT
@MikeT-ナビゲーションウィンドウに他のURLを入力したり、タブを閉じたり、JavaScriptを無効にしたりできます。ポイントは、誰かができるかどうかではありません。あなたができる、私ができる、誰でもできるからです。ポリシーの問題として、可能であればあなたはすべきでないと人々は言っています。ブラウザーの設計方法についてではなく、アプリケーションのプログラミング方法について話します。
— PoloHoleSet
@PoloHoleSetナビゲーションをロックする場合は、ブラウザーの履歴と入力されたURLによってワークフローをバイパスする方法も提供されるため、戻るボタンだけでなくロックアウトする必要があります。私が言ったことのように、あなたや私が何をするかについて話しているのではなく、悪意のある要素です最新のWebでは、スクリプトを使用してコンテンツを提供していますが、これは、ユーザーを細かく制御してワークフローを提供するアプリを作成したい場合に必要です
— MikeT
4

私は同じ質問を探していて、サイトで次のコードを見つけました。ここでそれを共有すると思った：

function noBack()
{
   window.history.forward()
}
noBack();
window.onload = noBack;
window.onpageshow = function(evt){ if(evt.persisted) noBack(); }
window.onunload = function(){ void(0); }

ただし、上記のユーザーが述べたように、これは決して良い習慣ではなく、あらゆる理由で回避する必要があります。

— user704988
ソース
2
避けるべき理由を述べていただければ幸いです。
— Chris Snow、
私の理解では、誰かのブラウザの[戻る]ボタンを技術的に無効にすることはできません。ボタンを使用できないようにするか、同じページを引き続きロードできるようにすることができます。JSを介して行うのではなく、サーバー側のコードを使用し、[戻る]ボタンを使用する必要のない適切なロジックを使用します。同じページの再読み込みやカスタムメッセージの表示などの代替アクションを使用する必要があります。
— user704988 2012年
2

クライアント側のテクノロジーに依存している場合、それは回避できます。たとえば、JavaScriptが無効になっている可能性があります。または、ユーザーがJSスクリプトを実行して制限を回避する場合もあります。

私の推測では、これを行うには、ユーザーセッションをサーバー側で追跡し、必要なページに（Response.Redirectではなく、Server.Transferのように）ユーザー/ブラウザーをリダイレクトする必要があります。

— devio
ソース
2

いくつかの異なる実装がありました。IEにはフラッシュソリューションといくつかのiframe / frameソリューションがあります。これをチェック

http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

ところで：戻るボタンを無効にする（または少なくとも1つのステップを防ぐ）には、多くの正当な理由があります。上記の記事で説明したハッシュソリューションを実装する例としてgmailを見てください。

Googleは「どのようにajaxが戻るボタンを壊したのか」と、ユーザーのテストと戻るボタンを無効にすることの妥当性に関する多くの記事を見つけます。

— ダリンダイアー
ソース
Facebookの新しい写真ビューアもチェックしてください。戻るボタンを押すと、ブラウザのデフォルトを実行する代わりに、写真（必要なもの）に戻ることに注意してください
— DallinDyer
2

私も同じ問題がありました。このJavaスクリプト関数をヘッドタグまたはで使用すると、100％正常に動作し、元に戻せません。

 <script type = "text/javascript" >
      function preventBack(){window.history.forward();}
        setTimeout("preventBack()", 0);
        window.onunload=function(){null};
    </script>
— アブドゥル・ハリック
ソース
1

このコードを試してください。私のために働いた。基本的には、ページがロードされるとすぐにハッシュを変更し、URLに「1」を追加することによって最近の履歴ページを変更します。したがって、戻るボタンを押すと、毎回同じページにリダイレクトされます。

 <script type="text/javascript">
    var storedHash = window.location.hash;
    function changeHashOnLoad() { window.location.hash = "1";}
    window.onhashchange = function () {
        window.location.hash = storedHash;
    }
</script>

<body onload="changeHashOnLoad(); ">

</bod>
— Pシュレスタ
ソース
0

ブラウザの戻るボタンを無効にするのではなく、サポートすることをお勧めします。.NET 3.5は、ブラウザの戻る（および進む）ボタンを非常にうまく処理できます。Googleで検索：「Scriptmanager EnableHistory」。どのユーザーアクションがブラウザーの履歴にエントリを追加するか（ScriptManager-> AddHistoryPoint）を制御でき、ユーザーがブラウザーの[戻る]ボタンまたは[進む]ボタンをクリックするたびにASP.NETアプリケーションがイベントを受け取ります。これはすべての既知のブラウザで機能します

— コーン
ソース
0

全体として、戻るボタンを無効にすることは実際に悪い習慣です。ただし、特定の状況では、戻るボタンの機能が意味をなさない場合があります。

ページ間の不要なナビゲーションを防ぐ方法の1つは次のとおりです。

トップページ（ファイルtop.php）：

<?php
    session_start();
    $_SESSION[pid]++;
    echo "top page $_SESSION[pid]";
    echo "<BR><a href='secondary.php?pid=$_SESSION[pid]'>secondary page</a>";
?>

2次ページ（ファイルsecondary.php）：

<?php
    session_start();
    if ($_SESSION[pid] != $_GET[pid]) 
        header("location: top.php");
    else {
        echo "secondary page $_SESSION[pid]";
        echo "<BR><a href='top.php'>top</a>";
    }
?>

その効果は、トップページからセカンダリページに移動し、独自のリンクを使用して戻る（たとえば、キャンセル）ことを許可することです。ただし、トップページに戻った後、ブラウザの戻るボタンはセカンダリページに移動できません。

— アノノマウサー
ソース
0

以前も同じ状況に直面していて、何の助けもありませんでした。これらのことを試してみてください多分これらはあなたのために働くでしょう

ログインページ<head>タグ：

<script type="text/javascript">
    window.history.forward();
</script>

ログアウトボタンで私はこれをしました：

protected void Btn_Logout_Click(object sender, EventArgs e)      
{
    connObj.Close();
    Session.Abandon();
    Session.RemoveAll();
    Session.Clear();
    HttpContext.Current.Session.Abandon();
}

ログインページでは、次のようにユーザー名テキストボックスに焦点を当てています：

protected void Page_Load(object sender, EventArgs e)
{
    _txtUsername.Focus();
}

これが役に立てば幸い... :)誰かがこのページを編集する方法を教えてくれます...

— ロビン
ソース
a）回答を編集するb）疑問符をクリックするc）高度なヘルプをクリックするd）読んで適用する:-)選択したブロックをctrl-kでイン/インデント解除して、コードとしてアン/フォーマットすることにも注意してください。さらに、フォーマッタはタブをうまく処理できません（ただし、おそらくここでは問題にはなりません）
— kleopatra
0

アイテムを編集/削除しているときにページが予期せずリダイレクトされないように、Webアプリの削除キーとバックスペースキーを軽く抑制する必要がある場合は、次のコードを使用できます。

window.addEventListener('keydown', function(e) {
  var key = e.keyCode || e.which;
  if (key == 8 /*BACKSPACE*/ || key == 46/*DELETE*/) {
    var len=window.location.href.length;
    if(window.location.href[len-1]!='#') window.location.href += "#";
  }
},false);
— nvd_ai
ソース
0

このコードを試してください。このコードをマスターページに実装するだけで、すべてのページで機能します

<script type="text/javascript">
    window.onload = function () {
        noBack();
    }
    function noBack() {
        window.history.forward();
    }
</script>
<body  onpageshow="if (event.persisted) noBack();">
</body>
— スハイブ・ジャンファ
ソース
0

Yossi Shashoのコードの問題は、ページが50ミリ秒ごとに最上部にスクロールすることです。だから私はそのコードを変更しました。現在、IE8以上のすべての最新ブラウザーで正常に動作しています

var storedHash = window.location.hash;
function changeHashOnLoad() {
    window.location.href += "#";
    setTimeout("changeHashAgain()", "50");
}

function changeHashAgain() {
    window.location.href += "1";
}

function restoreHash() {
    if (window.location.hash != storedHash) {
        window.location.hash = storedHash;
    }
}

if (window.addEventListener) {
    window.addEventListener("hashchange", function () {
        restoreHash();
    }, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", function () {
        restoreHash();
    });
}
$(window).load(function () { changeHashOnLoad(); });
— ヴィシュヌTS
ソース
0

これでうまくいったようです。

history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
    history.pushState(null, null, $(location).attr('href'));
});
— jgabb
ソース
0 
<script>
    $(document).ready(function() {
        function disableBack() { window.history.forward() }

        window.onload = disableBack();
        window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
    });
</script>
— チェタン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.