web-dev-qa-db-ja.com

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

私は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の値から試験に時間を要する試験タイマーを持っています。タイマーはそれに応じて起動しますが、戻るボタンを無効にするためにコードを入力すると停止します。私の問題は何ですか？

javascriptbrowser
123
Sawant Akshay

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

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

このページには、could戻るボタンを無効にしようとするいくつかの方法がリストされていますが、いずれも保証されていません：

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

146
ColinE

通常、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ですので、ほとんどのブラウザで動作します。backspacekeyも無効になりますが、keyはinputフィールドとtextareaの中では正常に機能します。

推奨設定

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

Working DEMO！

次のブラウザでテストおよび検証済み

  • クロム。
  • Firefox.
  • IE（8-11）とエッジ。
  • サファリ。
112
Rohit416
<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>
64
vrfvr

私はこれに遭遇し、さまざまなブラウザ上で正しくそして「うまく」機能するソリューションを必要としていました Mobile Safariを含む （投稿時の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()はそれらすべてに働きます。
  • history.pushState()の3番目の引数は rl です。 'no-back-button'や'pagename'のような文字列を渡すソリューションは、ページ上でRefresh/Reloadを試みるまではうまくいくようです。ブラウザがそれを含むページを見つけるときに "Page not found"エラーが発生しますURL （ブラウザでも、ページ上のアドレスバーにその文字列が含まれている可能性があります。これは見苦しいです。）location.hrefはUrlに使用する必要があります。
  • history.pushState()の2番目の引数は タイトル です。ウェブを見てみると、ほとんどの場所でそれは「使われていない」と言われており、ここでのすべての解決策はそのためにnullを渡しています。ただし、少なくともMobile Safariでは、そのページのURLがユーザーがアクセスできる履歴ドロップダウンに表示されます。しかし、それが通常のページ訪問のためのエントリーを追加するとき、それは title を入れることが好ましい、それは好ましい。そのためにdocument.titleを渡しても同じ動作になります。
54
JonBrave

このコードは、HTML 5履歴APIをサポートする最近のブラウザの戻るボタンを無効にします。通常の状況では、戻るボタンを押すと前のページに戻ります。 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');
});
25
Jeremy Warne

これは私がそれを達成することができた方法です。 window.locationを奇妙に変更しても、クロムとサファリでうまくいきませんでした。 location.hashがクロムとサファリの履歴にエントリを作成しないことが起こります。だからあなたはpushstateを使わなければならないでしょう。これはすべてのブラウザで私のために働いています。

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

    };
10
Sanchitos
<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>
9
Ashwin Patil
    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };
8
Eng Mahmoud El Torri

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'
    }
  }
}
8
dav_i
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

このjavascriptでは、どのユーザも元に戻れません（Chrome、FF、IE、Edgeで動作します）。

6
Surajit Mitra

簡単に試してみてください。

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
5
Lakhan

ブラウザ制限イベントのバックイベント

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
4
Fezal halai

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

利点：

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

注：他のソリューションのいくつかはonbeforeunloadを使用します。 しないこの目的でonbeforeunloadを使用してください。ユーザーがウィンドウを閉じたり、バックアローをヒットしようとするたびにダイアログがポップアップします。onbeforeunloadのようなモーダルは通常、まれな状況でのみ適切です。 veは実際には画面上で変更を行っており、この目的のためではなく、変更を保存していません。

仕組み

  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>
3
Jamieson Becker

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

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
2
jgabb

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

// 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)
1
Joakim L. Christiansen

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

それは基本的には進行中のドキュメントの 'mouseenter'/'mouseleave'イベントと共にウィンドウの "onbeforeunload"イベントを割り当てるので、クリックがドキュメントの範囲外になったときにのみアラートが発生します（ブラウザの戻るか進むボタンのどちらかです）

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

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
1
Abdelqoddous Rifai
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
1
user3789888

これを試して、デフォルトで "Back"として機能する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
Ajit Kamble
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
1
Kamlesh

HTMLページを1つ作成します（index.html）。私は（script）フォルダ/ディレクトリの中にも一つ（mechanism.js）を作成します。次に、必要に応じてform、table、span、およびdivタグを使用して、すべてのコンテンツを（index.html）内に配置します。さて、ここでは前後に何もしないようにするトリックがあります！

まず、あなたは1ページしか持っていないという事実！次に、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、およびspanタグのid呼び出しに注目してください。これは、同じページの同じspanタグに異なる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>

私はあなたに頭痛を与えなかったことを願っています。私がした場合は申し訳ありません:-)

0
hacker1033

あなたはこれをすることはできないし、すべきではありません。しかし、これは役に立つかもしれません

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

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

0
Shailendra Sharma

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

ページが実際に更新されたときに、ボタンが（理論的には）利用可能になります。私はそれから、注文が既に送信されていることをページロードで反応させることができて、その時リダイレクトもできました。

0
Valamas