JavaScript 首次访问时同意 ToS

Question

我正在尝试制作一个脚本，如果您以前从未访问过该网站，它将重定向到 /agree.htm 如果他们点击好就不会再次询问，但如果他们不点击它将继续重定向到 /agree.htm 页面。到目前为止 JavaScript：

function doit() {
    document.getElementById('uuid').innerHTML = generateUUID();
    var yes = getUrlVars()["agreed"];
    if (yes == "true") {setCookie('VisitDate',1,365);   } 
    if (yes != "true")  {window.location = "/agree.htm";}
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function getCookie(NameOfCookie){
    if (document.cookie.length > 0) {              
    begin = document.cookie.indexOf(NameOfCookie+"=");       
    if (begin != -1) {           
      begin += NameOfCookie.length+1;       
      end = document.cookie.indexOf(";", begin);
      if (end == -1) end = document.cookie.length;
        return unescape(document.cookie.substring(begin, end));
    } 
  }
  return null;
}

function setCookie(NameOfCookie, value, expiredays) {
var ExpireDate = new Date();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));

  document.cookie = NameOfCookie + "=" + escape(value) + 
  ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}

function delCookie (NameOfCookie) {
  if (getCookie(NameOfCookie)) {
    document.cookie = NameOfCookie + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

function DoTheCookieStuff(LastChangeDate)
{
dt=new Date();
year=dt.getYear(); if (year<=9) {year="0"+year};
month=dt.getMonth()+1; if (month<=9) {month="0"+month};
date=dt.getDate(); if (date<=9) {date="0"+date};
ThisDate=year+month+date;

LastVisitDate=getCookie('VisitDate');
if (LastVisitDate!=null) 
 {  if (LastVisitDate<LastChangeDate) {}
    else {}
    setCookie('VisitDate',ThisDate,365)
 }

else {window.location  = "\agree.htm";}
}

它设置了 cookie，但会继续重定向到 /agree.htm 页面。

AGREE.HTM:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>StratHaxxs Co. ToS Agreement</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
  .ui-dialog-titlebar-close {
  visibility: hidden;
}
.ui-widget.success-dialog {
    font-family: Verdana,Arial,sans-serif;
    font-size: .8em;
}

.ui-widget-content.success-dialog {
    background: #F9F9F9;
    border: 1px solid #90d93f;
    color: #222222;
}

.ui-dialog.success-dialog {
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    position: absolute;
    top: 0;
}

.ui-dialog.success-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 0 !important;
    margin: 0;
}

.ui-dialog.success-dialog .ui-widget-header {
    background: #b0de78;
    border: 0;
    color: #fff;
    font-weight: normal;
}

.ui-dialog.success-dialog .ui-dialog-titlebar {
    padding: 0.1em .5em;
    position: relative;
    font-size: 1em;
}
.ui-dialog .ui-dialog-buttonpane { 
    text-align: center;

}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none;

}
</style>

  <script>
  $(function() {
  $('#success').dialog({
    height: 180,
    width: 350,
    modal: true,
    resizable: false,
    dialogClass: 'no-close success-dialog',
    buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
          window.location.href = "/?agreed=true";
        }
      }
});
  });
  </script>
</head>
<body>

<div id="success"  title="Welcome!">
  <p>
  This is the first time you have visited our site, to continue to the site:
     Click 'Ok' if you agree to our <b>ToS</b>: <a href="/tos.html">Here</a><br><br>Otherwise press the back button or close this window. 
  </p>
</div>

</body>
</html>

Answer 1

Working Demo

看起来您的 Javascript 中列出了所有正确的函数，但没有调用它们。

在页面加载时，您想检查 cookie 是否存在。如果没有，那么您需要显示 jQuery Dialog 模态。

我添加了一个按钮来删除 cookie，以便您进行测试。

从您的 <script> 标签中删除 Javascript 并将其替换为：

Javascript

$( document ).ready(function() {
    $('#remove-cookie').click(function() {
        delCookie('agreeCookie');
        $('h1').text('Cookie Removed');
        $('#remove-cookie').hide();
    });
    var cookieStatus = getCookie('agreeCookie');
    console.log(cookieStatus);
    if (cookieStatus != 'true') {
        tryRedirect('agree.htm');
        $('#success').show().dialog({
            height: 180,
            width: 350,
            modal: true,
            resizable: false,
            dialogClass: 'no-close success-dialog',
            buttons: {
                Ok: function () {
                    setCookie('agreeCookie', true, 100);
                    $(this).dialog("close");
                    window.location.href = "index.html?agreed=true";
                }
            }
        });
    }
    else {
        tryRedirect('index.html');
        $('#remove-cookie').show();
    }
    function tryRedirect(target) {
        var url = window.location.pathname;
        var filename = url.substring(url.lastIndexOf('/') + 1);
        if (filename != target) {
            window.location.href = target;
        }
    }
});

测试

打开 Demo 并在对话框中单击“确定”（这将添加 cookie）。
重新加载页面。 cookie 应该存在，您将被重定向到 index.html 并显示删除 cookie 按钮（根据需要重复此步骤，它仍然应该这样做）。
按删除 cookie 按钮并重新加载。现在它应该重定向到 agree.htm 并再次显示对话框。

JavaScript 首次访问时同意 ToS

JavaScript On First Visit Agree to ToS

html

javascript

jquery

dialog

jquery-ui

Working Demo

Javascript

测试