javascript - 如何对网页内容实现客户端密码保护？

Question

我正在尝试使用 JavaScript 对页面的一部分进行密码保护。用户将看到一个简单的输入字段和提交按钮，输入正确的密码后，用户将获得对“隐藏”内容的访问权限。

目前，无法查看“隐藏”内容，因为每次重新加载页面(表单提交时发生)时它都会被隐藏。

是的，我知道这不被视为“密码保护”，因为密码是在 js 本身中找到的，但这对于这个特定场景来说并不重要。

这是我的代码，感谢您的帮助。

<script language="JavaScript">
    window.onload=function(){
    var e = document.getElementById("hiddenContent");
    e.style.display = 'none';   
};
function showPass(form){
    var pass = form.pwd.value;

    if(pass == "password") {
        e.style.display = 'block';      
    }
}
</script>

<form action="#" onsubmit="showPass(form);return false">
Please Enter The Password: <input type="password" name="pwd" /> 
<input type="submit" value="Log In" />
</form>
<div id="hiddenContent">Here is the Hidden content...</div>

提交正确密码后如何才能查看隐藏内容？

Answer 1

有两个问题会导致代码崩溃并停止执行。这会导致您的表单提交，这是您不希望看到的，并且您的其他代码也不会运行。

onsubmit="showPass(form) 应为 onsubmit="showPass(this)

e 不是全局变量。它被匿名函数包围，外部不可见。这意味着 showPass() 不知道 e 指的是什么。改变这个

var e = document.getElementById("hiddenContent");

至

e = document.getElementById("hiddenContent");(无 var 关键字)

或者(也许更好)在 showPass() 中获取对该元素的唯一引用