导航到其他选项卡时 JavaScript 提示窗口消失答案

【问题标题】：JavaScript prompt window disappears when navigating to other tab导航到其他选项卡时 JavaScript 提示窗口消失
【发布时间】：2018-05-04 05:58:52
【问题描述】：

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

 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')">

【问题讨论】：

正确的方法是从您的服务器安全地创建对服务器密码保护数据的身份验证，客户端 javascript 不安全。
谢谢@CelebBlack。我只是在寻找一个短期的解决方案，但是你是绝对正确的。

标签： javascript function prompt password-protection

【解决方案1】：

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

var didEnterPassword = false;

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

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

【讨论】：

【解决方案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 来处理这些事情。祝你好运！

【讨论】：

@AMeshu 我不明白你的函数是如何解决提示事件消失的问题的。你能详细说明一下吗？
这是另一种方法：隐藏内容，除非用户输入正确的密码。

【解决方案3】：

您可以使用 while 循环，只要用户没有发送答案，它就会一直运行：

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

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

【讨论】：