JavaScript 导航到其他选项卡时提示 window 消失

Question

我已经编写了以下代码片段来在我的网站上启用密码，但是如果我导航到浏览器上的不同选项卡，密码提示就会消失并且此功能不再有用。

 function passWord(title) {

       var pwd = prompt(title);

       switch (pwd) {
         case '2017': true;
           break;

         case null: passWord('Access Denied - Password Incorrect, Please Try Again.');
           break;

         default: passWord('Access Denied - Password Incorrect, Please Try Again.');
       }
     }

我在 body 标签中调用这个函数。

   <body onload="passWord('Please enter password here')">

Answer 1

您可以使用 focus 事件查看用户何时返回您的页面：

var didEnterPassword = false;

window.addEventListener("focus", function(e){
    if(!didEnterPassword && prompt("hello again") == "my secret password"){
        didEnterPassword = true;
    }
})

请记住，这 非常不安全 因为任何人在开始挖掘您的代码时都可以 my secret password。

Answer 2

你可以试试这个方法：

<style>#screen {display: none;}</style>
<body onload="passWord();">
  <div id="welcome">
    <h1>Welcome Page</h1>
  </div>
  <div id="screen">
    <h1>Unique Page</h1>
  </div>
  <script>
    function passWord() {
      var welcome = document.getElementById("welcome");    
      var screen = document.getElementById("screen");
      var pwd = prompt("Enter your password", "TYPE HERE");
      switch(pwd) {
        case "2017":
          screen.style.display = "block";
          welcome.style.display = "none";
        break;
        default:
          screen.style.display = "none";
          welcome.style.display = "block";
      }
    }
  </script>
</body>

正如@Caleb Black 评论 - 如果安全问题，最好使用 php 来处理这些事情。祝你好运！

Answer 3

您可以使用 while 循环来保持运行只要用户还没有发送他们的答案：

var pwd;
while(pwd == null) pwd = prompt(title);

请注意，它不会保留失去焦点之前输入的任何文本。

JavaScript 导航到其他选项卡时提示 window 消失

JavaScript prompt window disappears when navigating to other tab

javascript

prompt

function

password-protection