JavaScriptを使用してブラウザの戻るボタンを停止する方法

155

私はphpでオンラインクイズアプリをやっています。ユーザーが試験に戻るのを制限したい。次のスクリプトを試しましたが、タイマーが停止します。私は何をすべきか？

ソースコードを含めました。タイマーはcdtimer.jsに格納されています

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

mysqlの値から試験の期間をとる試験タイマーがあります。タイマーはそれに応じて開始しますが、[戻る]ボタンを無効にするためのコードを入力するとタイマーが停止します。私の問題は何ですか？

javascript  browser 
— Sawant Akshay
ソース
— Darshan Dixit

回答:

157

戻るボタンを無効にしても効果がない理由は数多くあります。あなたの最善の策は、ユーザーに警告することです：

window.onbeforeunload = function() { return "Your work will be lost."; };

このページでは、いくつかの方法リストを行うことができ、戻るボタンを無効にしようが、どれが保証されていません。

http://www.irt.org/script/311.htm

— コリンE
ソース
回答がすでに送信されているかどうかを確認し、そうであれば拒否します。
— Sela Yair 2015年
4
それの価値があるものは、今、現代のブラウザで変更されたことに言及：参照stackoverflow.com/questions/19926641/...
— devrobf
126

一般に、Webブラウザーのデフォルトの動作をオーバーライドすることはお勧めできません。セキュリティ上の理由から、クライアント側のスクリプトには、これを実行するための十分な権限がありません。

同様の質問もいくつかありますが、

ブラウザの戻るボタンを実際に無効にすることはできません。ただし、ロジックを使用してマジックを実行し、ユーザーが戻ってナビゲートして、無効になっているような印象を与えるのを防ぐことができます。方法は次のとおりです。

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

これは純粋なJavaScriptであるため、ほとんどのブラウザで機能します。バックスペースキーも無効になりますが、キーはinputフィールドと内で正常に機能しますtextarea。

推奨セットアップ：

このスニペットを別のスクリプトに配置し、この動作が必要なページに含めます。現在のセットアップではonload、このコードの理想的なエントリポイントであるDOMのイベントを実行します。

作業デモ！

以下のブラウザでテストおよび検証されています、

  • クロム。
  • Firefox。
  • IE（8-11）およびEdge。
  • サファリ。
— Rohit416
ソース
1
なぜsetTimeoutなのかわかりません。最初に＃を追加しただけの場合！場所を見つけてsetTimeoutを削除しても、引き続き機能します。
— baraber
はい、それは機能しますが、私が最初にこれを持っているときにメモリから何かを思い出さなければならない場合...フローは他のブラウザのようにクロムで適切に機能していませんでした。Chromeはlocation.hash最初に空を返したので、このようにする必要がありました。これにはさらに改善がある可能性がありますが、50ミリ秒かかっただけでそれほど費用がかからなかったので、そのままにしておきます。
— Rohit416 2015年
ああ、それはメモリの問題でした。ありがとう:)私はあなたのソリューションを使用しましたが、setIntervalを.onhashchangeハンドラーに置き換えました。完璧に動作します。しかし、別の質問もあります。なぜ「if（global.location.hash！= _hash）」を行うのですか？window.location.hashは常に「＃」文字を含むハッシュを返す必要があり、_hashに「＃」文字が含まれないため、この条件は常にtrueである可能性があると思います。何か覚えていますか？ブラウザがlocation.hashに「＃」文字を返さない場合の保護ですか？
— baraber
私は推奨どおりに.jsファイルを作成し、次のコードを使用してコードにjsファイルを含めました：<script src = "./ javascript / noback.js"> </ script>ただし、（Safariを使用して）バックを実行できます。何が欠けていますか？このライブラリは、私が使用する他のライブラリと同じ方法で追加されたので、インクルードは良好です。
— ティム
1
— iPad Air、iOS
75

私はこれに出会い、モバイルサファリ（投稿時のiOS9）を含むさまざまなブラウザーで正しく「うまく」機能するソリューションが必要でした。どの解決策も完全に適切ではありませんでした。私は以下を提供します（IE11、FireFox、Chrome、Safariでテスト済み）：

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

次の点に注意してください。

  • history.forward()（私の古い解決策）はMobile Safariでは機能しません---何もしないようです（つまり、ユーザーはまだ戻ることができます）。history.pushState()それらすべてで機能します。
  • の3番目の引数history.pushState()はURLです。のような文字列を渡す'no-back-button'か、'pagename'正常に機能しているように見えるソリューションは、ページで更新/再読み込みを試行するまで、ブラウザがそのURLとしてそのページを見つけようとすると、「ページが見つかりません」というエラーが生成されます。（ブラウザは、ページ上にあるときにアドレスバーにその文字列を含める可能性が高く、これは醜いです。）location.hrefUrlには使用する必要があります。
  • の2番目の引数history.pushState()はタイトルです。ほとんどの場所でWebを見回すと、それは「使用されていない」と言われ、ここでのすべてのソリューションnullはそのために渡されます。ただし、少なくともMobile Safariでは、ページのURLがユーザーがアクセスできる履歴ドロップダウンに配置されます。ただし、通常のページアクセスのエントリを追加すると、タイトルに挿入されます。したがって、それを渡すdocument.titleと同じ動作になります。
— ジョンブレイブ
ソース
3
これが正解です。Chrome、IE 11、Firefox、Edgeで完全に動作します。
— Concept211 2017
3
これは受け入れられる答えであるはずです。それはクロスプラットフォームであり、正常に動作します。
— calbertts 2017年
jsp sevletで送信後、ページを更新します。ページが表示されない（エラー）
— Madhuka Dilhan 2017
これまでのところ最良の解決策ですが、おそらく古いブラウザでは機能しません
— j4n7 '22
2
最新のブラウザに最適なソリューション。条件typeof（history.pushState）を使用するだけで古いブラウザーをサポートするために@ Rohit416回答と組み合わせました===「関数」はスムーズに動作します。
— Miklos Krivan
74 
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
— VRFVR
ソース
3
天才！私はこれを使用して、ユーザーがバックスペースを押したときに（たとえば、無効/読み取り専用フィールドで）バック/フォワードが意味をなさないWebアプリで誤って戻るボタンをトリガーするのを防ぎました。確認すると、コンテキストメニューオプションを含む（ボタン自体ではなく）戻るおよび転送機能が無効になります。IE8からIE11、Chrome、FFで検証済み。
— 2015年
1
これは機能しますが、テキストボックスに入力されたすべてのデータをリセットします。クリアリングを防ぐことは可能ですか？
— Somnium
6
Firefoxでは機能しましたが、Chromeでは機能しませんでした（バージョン36.0.1985.143）
— バラバー
これも私にとってはうまくいきましたが、Firefoxでは機能が損なわれるようwindow.history.back()です。ユーザーがブラウザの[戻る]ボタンをクリックしないようにする必要がありますが、場合によっては、ページに独自の[戻る]ボタンを提供することもあります。それを機能させる方法はありますか？
— AsGoodAsItGet 2016年
1
これは私にはうまくいきません。Windows 10でChromeバージョン55を使用しています。スクリプトをいくつかの場所（ヘッダーの先頭、本文の終わりなど）に配置しましたが、戻るボタンを使用して前のページに戻ることができます。
— Victor Stoddard 2017年
28

このコードは、HTML5 History APIをサポートする最新のブラウザーの戻るボタンを無効にします。通常の状況では、[戻る]ボタンを押すと、1つ前のページに戻ります。history.pushState（）を使用する場合、現在のページに追加のサブステップを追加し始めます。これが機能する方法は、history.pushState（）を3回使用し、次に[戻る]ボタンを押し始めると、最初の3回はこれらのサブステップに戻り、次に4回目に戻ることです。前のページ。

この動作をイベントのイベントリスナーと組み合わせると、popstate基本的にサブステートの無限ループを設定できます。したがって、ページをロードし、サブステートを押してから、戻るボタンを押すと、サブステートがポップされ、別のステートが押し出されるため、戻るボタンをもう一度押すと、サブステートが不足してプッシュすることはありません。戻るボタンを無効にする必要があると感じた場合は、これでアクセスできます。

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
— ジェレミー・ウォーン
ソース
2
どのブラウザでも、この後にページの更新/再読み込みを試行すると、「ページが見つかりません」というエラーが発生します。これはno-back-button... という名前のページを見つけようとするためです（ブラウザはno-back-buttonアドレスにも表示される可能性があります。あまりにも醜いように見えるバー）第三引数がhistory.pushState()あり、URL、および現在のページのURLである必要があります使用location.href代わりに。
— JonBrave
4
これでうまくいきました。'no-back-button'を "window.top.location.pathname + window.top.location.search"に変更するだけで、更新中でもページの名前が保持されます
— Steve
とりわけ、これは私にとってうまくいきました、賛成です。stackoverflow.com/questions/19926641/…を参照してください。
— user2171669 2016
私は多くの例を検討してきたが、これは1ページのサイトに最適なソリューションです
— djdance
URLを変更しているため、これは非常に悪い解決策です。数回戻ると転送すると、
— Chrome
21

ブラウザ制限イベント

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
— フェザル・ハライ
ソース
1
これはクロームでうまく機能します！、これが最良の答えであるため、なぜ人々は投票しないのですか？
— タリクSeyceri
1
次のブラウザーでWindows 10 OSを使用してテストしました（正常に動作します）Chromeバージョン74.0.3729.108（公式ビルド）（64ビット）Chrome Canaryバージョン76.0.3780.0（公式ビルド）Canary（32ビット）Chromiumバージョン66.0。 3355.0（開発者向けビルド）（64ビット）のFirefox 66.0.3（64ビット）EDGE IE 11のSafari 5.1.7
— タリクSeyceri
2
@TarıkSeyceriこれは、a）履歴APIをサポートするブラウザーでのみ機能するため、b）ページは実際に履歴APIを使用して状態を管理しています
— givanse
バージョン75以降、Chromeでは動作しなくなりました。サポート：support.google.com/chrome/thread/8721521
— gene b。
13 

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

— Eng Mahmoud El Torri
ソース
12
これは有効な回答かもしれませんが、コードが何をしてどのように機能するかを説明することで、他の人を助ける可能性がはるかに高くなります。コードのみの回答は、肯定的な注目をあまり受けない傾向があり、他の回答ほど有用ではありません。
— Aurora0001 2016年
Chrome、Firefox、IE、Edgeでテスト済み。それはうまくいきます。あなたは私を救いました。
— Nooovice Boooy
12

これは私がそれを達成した方法です。奇妙なことにwindow.locationを変更しても、ChromeとSafariではうまく機能しませんでした。location.hashがchromeとsafariの履歴にエントリを作成しないことが発生します。したがって、pushstateを使用する必要があります。これはすべてのブラウザで動作します。

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };
— サンチトス
ソース
1
IE9以下では機能しません。pushStateはサポートされていません。
— アレックス
すごい。これは優れたアプローチであり、ほとんどすべての最新ブラウザで機能します。
— Venugopal M
1
後のIEでうまく機能します。document.ready：$(document).ready(function () { .... });
— Oppa Gingham Style
「#nbb」の前に現在のURIを追加する必要があることに注意してください。すなわち「account＃nbb」
— Mladen Janjetovic '18
9 
<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
— アシュウィンパティル
ソース
どこかにドキュメントはありますかevent.persisted？
— Muhd 2013
1
ここにあなたの質問のために見つかったリンクがあります。ここで見つけてください @Muhd
— rbashish
私はこれを試してみましたが、機能しませんでした
— PedroJoaquín19
8

jordanhollinger.comに関するこの記事は、私が感じる最良の選択肢です。Razorの回答に似ていますが、少し明確です。以下のコード。ジョーダンホリンジャーへの全クレジット：

前のページ：

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

ノーリターンのJavaScriptのページ：

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}
— dav_i
ソース
8 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

このJavaScriptは、ユーザーが戻ることを許可しません（Chrome、FF、IE、Edgeで動作します）

— スラジットミトラ
ソース
5

簡単に試してください：

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
— ラクハン
ソース
3

後でページに干渉することなく、戻る矢印を壊す非常にシンプルでクリーンな機能。

利点：

  • 瞬時にロードして元のハッシュを復元するので、ユーザーは目に見える変化を伴うURLに気を取られません。
  • ユーザーは引き続き10回押し続けることで終了できます（これは良いことです）が誤って終了することはありません
  • 使用する他のソリューションのようなユーザーの干渉はありません onbeforeunload
  • 一度だけ実行され、それを使用して状態を追跡する場合に、それ以上のハッシュ操作を妨害しません
  • 元のハッシュを復元するため、ほとんど見えません。
  • setInterval遅いブラウザを壊さずに常に機能するように使用します。
  • 純粋なJavascriptはHTML5履歴を必要とせず、どこでも機能します。
  • 邪魔にならず、シンプルで、他のコードとうまく連動します。
  • unbeforeunloadモーダルダイアログでユーザーを中断するものは使用しません。
  • それは大騒ぎせずに動作します。

注：他のソリューションの一部ではを使用していますonbeforeunload。この目的には使用しないでください。onbeforeunloadユーザーがウィンドウを閉じたり、Backarrowを押したりonbeforeunloadするたびにダイアログがポップアップします。このようなモーダルは、通常、実際に画面で変更を加えていないなど、まれな状況でのみ適切です。この目的のためではなく、彼らを救った。

使い方

  1. ページの読み込み時に実行されます
  2. 元のハッシュを保存します（URLにハッシュがある場合）。
  3. ハッシュに＃/ noop / {1..10}を順次追加します
  4. 元のハッシュを復元します

それでおしまい。これ以上いじりをしたり、バックグラウンドでイベントを監視したりする必要はありません。

1秒で使用

デプロイするには、これをページまたはJSの任意の場所に追加します。

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>
— 致命的な誤り
ソース
2

これは、ブラウザの戻るボタンと、戻るボタンを無効にするのに役立ちました。 

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
— jgabb
ソース
1 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
— user3789888
ソース
1

これを行うことはできませんし、すべきではありません。しかし、これは役立つかもしれません

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

私のクロムとFirefoxで動作します

— シャイレンドラシャルマ
ソース
1

これを試して、デフォルトで「戻る」として機能するIEのバックスペースボタンを防止します。

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>
— アジットカンブル
ソース
1

完璧でありながら解決策は実際には非常に単純であると私は信じています。

基本的には、ウィンドウの「onbeforeunload」イベントと進行中のドキュメントの「mouseenter」/「mouseleave」イベントを割り当てているため、クリックがドキュメントの範囲外にある場合にのみアラートがトリガーされます（ブラウザーの戻るボタンまたは進むボタンのいずれかになります）。

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
— Abdelqoddous Rifai
ソース
1

最近のブラウザではこれはうまくいくようです：

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)
— ヨアキム・L・クリスチャンセン
ソース
1
何が起こったのかはわかりませんが、何らかの理由で別のマシンでこの回答に反対票を入れました。これは私の意図ではありませんでしたが、投票を取り消すことはできません：/
— Lennard Fonteijn
@LennardFonteijnを傷つけない気持ち:)
— Joakim L. Christiansen
1

Chrome 79では、最も支持されている回答がどれも私にとってうまくいきませんでした。バージョン75以降、Chromeの[戻る]ボタンに関する動作が変更されたようです。こちらをご覧ください：

https://support.google.com/chrome/thread/8721521?hl=en

ただし、そのGoogleスレッドでは、最後にAzrulmukmin Azmiによって提供された答えが機能しました。これが彼の解決策です。

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

Chromeの問題は、ブラウザーの操作（つまり、history.backを呼び出す）を行わない限り、onpopstateイベントをトリガーしないことです。それがスクリプトに追加した理由です。

彼の書いた内容は完全にはわかりませんがhistory.back() / history.forward()、Chrome 75以降でBackをブロックするために追加が必要になっているようです。

— 遺伝子b。
ソース
ハイとローを検索した後、これは最終的にAndroidブラウザーでも機能しましたが、何らかの理由でブラウザーの戻るボタンイベントが他のスクリプトで検出されませんでした。ありがとう、ありがとう、またありがとう！テスト済みで、Chrome 83の下でデスクトップとモバイルの両方で正常に動作しています。ジーン、あなたは命の恩人です！
— Ivan
0

1つのHTMLページ（index.html）を作成します。また、（script）フォルダー/ディレクトリ内に1つ（mechanism.js）を作成します。次に、フォーム、テーブル、スパン、およびdivタグを必要に応じて使用して、すべてのコンテンツを（index.html）内に配置します。さて、ここに戻る/進むを何もしないようにするトリックがあります！

まず、ページが1つしかないことです。2つ目は、通常のリンクを介して必要なときに、同じページのコンテンツを非表示および表示するためのspan / divタグ付きのJavaScriptの使用です。

'index.html'内：

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

「mechanism.js」の内部：

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

毛むくじゃらに見えますが、関数名と呼び出し、埋め込みHTML、およびスパンタグIDの呼び出しに注意してください。これは、同じページの同じスパンタグに異なるHTMLを挿入する方法を示すためです。戻る/進むはこのデザインにどのように影響しますか？同じページでオブジェクトを非表示にし、他のオブジェクトをすべて置き換えるため、これはできません。

非表示にして表示する方法は？ここに行く：必要に応じて、「mechanism.js」内の関数を使用します：

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

'index.html'の内部では、リンクを介して関数を呼び出します。

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

そして

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

私はあなたに頭痛を与えなかったことを望みます。すみません:-)

— ハッカー1033
ソース
0

私の場合、これは買い物注文でした。だから私がしたことはボタンを無効にすることでした。ユーザーがクリックすると、ボタンはまだ無効になっています。彼らがもう一度クリックして、次に進むためにページボタンをクリックしたとき。彼らの注文が送信され、別のページにスキップされることを知っていました。

（理論的には）ボタンを使用可能にするページが実際に更新された場合、その後、ページの読み込みで、注文が既に送信されていることを確認し、リダイレクトすることができました。

— ヴァラマス
ソース
0 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
— カムレシュ
ソース
3
1. javascript:記述したは、「javascript」という名前のJavaScript ラベルを定義します。私があなたがそれを意図していたことは非常に疑います。href=javascript:...JavaScript <script>ブロックと混同しているようです。2. HTML5でのlanguage="JavaScript"有効な<script>属性ではなくなりました。3.上記の2つの点はそれほど重要ではありません。重要なのはhistory.forward(1)、Mobile Safariでは機能しないことです（少なくとも）。history.pushState()代わりに答えの1つを使用してください。
— JonBrave
0

小さなスクリプトを入れて確認するだけです。前のページにアクセスすることはできません。これはJavaScriptで行われます。

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

window.onunload関数は、ブラウザから前のページまたは前のページにアクセスしようとすると起動します。

お役に立てれば。

— noobprogrammer
ソース
0

React.JSでこの問題が発生しました。（クラスコンポーネント）

そして簡単に解決

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

HashRouterから使用しましたreact-router-dom。

— あー
ソース
0

設定するだけですlocation.hash="Something"。戻るボタンを押すと、ハッシュはURLから削除されますが、ページは戻りません。この方法は、誤って戻るのを防ぐのに適していますが、セキュリティ上の理由から、再応答を防ぐためにバックエンドを設計する必要があります

— アビシェク
ソース
-1 
//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}
— Chauncey.Zhong
ソース
1イベントオブジェクト2を取得し、判定条件としてイベントソース種別を決定します。3. Backspaceヒット、パスワードまたはシングルのイベントソースタイプ、およびreadonlyプロパティのtrueまたはenabledプロパティがfalseの場合、Backspaceキーの失敗。Backspaceを押すと、イベントのソースがパスワードまたはシングルを入力し、Backspaceキーの失敗です
— Chauncey.Zhong
問題は、バックスペースキーではなく、戻るナビゲーションボタンの使用についてです。
— クエンティン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.