Question

因此，我正在构建的网站上有一个特定的页面（刚刚命名为页面文件19.html），它通过弹出窗口询问用户是否超过19岁。这是我在19.html页面上链接到的19.js文件。

var yourAge = prompt("Please enter your age: ")
if (yourAge < 19)
   alert("Users under the age of 19 cannot access this page");

if (yourAge >= 19)
    alert("Enjoy!");
if (yourAge < 19)
    location.href = ("../html/index.html");

页面上没有内容，所以我在我的19.html页面上创建的div class =“board”中添加了一个简单的“Hello”文本。但是，我不希望在用户成功进入访问该页面的年龄之前出现“Hello”文本（以及我将在此页面的div中添加的任何其他未来内容），并在“Enjoy！”之后单击OK。 “弹出。任何人都可以帮助我如何做到这一点？我是否必须以某种方式实现jquery？请帮忙，谢谢。

我的html文件中的div板：

<div class="board">
<h1>Hello</h1>
</div>

Answer 1

根据评论更新

假设存在这些CSS规则，添加的样本将显示＆＃34; Hello＆＃34;文本

.board h1 {
  display: none;
}
.board.showme h1 {
  display: block;
}

一个简单的方法就是这样，使用AJAX，虽然很容易破解

＆＃13;

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();

  var yourAge = prompt("Please enter your age: ")
  
  if (yourAge < 19) {
    alert("Users under the age of 19 cannot access this page");
    // temp. commented out as not having a real link to 19.html
    //location.href = ("../html/index.html");
  }

  if (yourAge >= 19) {
    alert("Enjoy!");
    document.querySelector('.board').classList.add('showme');
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {        
        document.getElementById("content").innerHTML = xhttp.responseText;
      }
    };
    xhttp.open("GET", "19.html", true);
    // temp. commented ou as not having a real link to 19.html
    //xhttp.send();
  }

})

＆＃13;

.board h1 {
  display: none;
}
.board.showme h1 {
  display: block;
}

＆＃13;

<a href="19.html">Goto page 19</a>
<div class="board">
  <h1>Hello</h1>
</div>

＆＃13;

旁注

正如@vastlysuperiorman建议的那样，你当然可以直接调用19.html文件。

if (yourAge >= 19) {
    alert("Enjoy!");
    document.querySelector('.board').classList.add('showme');
    location.href = ("../html/19.html");
}

Answer 2

在警报完成警报（单击“确定”）后发生某些事情，您可以构建自定义回调函数。以下是添加回调的代码：

var yourAge = prompt("Please enter your age: ");
if (yourAge < 19) {
   alert("Users under the age of 19 cannot access this page");
   location.href = ("../html/index.html");
}

if (yourAge >= 19) {
    function wishWell(amsg, callback){
        alert(amsg);
        if(typeof callback == "function") {
            callback();
        }
    }

    wishWell("Enjoy!", function(){
        location.href = ("19.html");
    });
}

正如许多用户所提到的，这不是一种阻止访问您网页的安全方法，因为用户可以查看包含所有链接的javascript。

这也不是让用户与您的网站互动的最佳方式。某些浏览器（如Chrome）允许通过复选框“阻止此网站显示其他弹出窗口”来阻止弹出警报。或者那种程度的东西。如果用户选中了该框，则在重新访问该页面时，将使用先前输入的数据忽略所有提示。

Answer 3

我会隐藏内容div，只有在用户回答＆gt; = 19时才显示内容。如下所示：

19.html

<div id="content" style="display: none;">
// ...
</div>

19.js

var yourAge = prompt("Please enter your age: ")

if (yourAge >= 19) {
    alert("Enjoy!");
    document.getElementById("content").style.display = "block";
} else {
    alert("Users under the age of 19 cannot access this page");
    location.href = ("../html/index.html");
}

但是，即使这样可行，它仍然依赖于启用JavaScript。由于内容已经发送，因此可以轻松打开开发人员工具并手动更改样式。

隐藏页面上的所有内容，直到年龄验证弹出？

3 个答案: