第一次访问的JavaScript同意ToS

时间:2015-11-29 01:54:12

标签: javascript jquery html jquery-ui dialog

我正在尝试创建一个脚本,如果您之前从未访问过该网站,它会重定向到/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>

1 个答案:

答案 0 :(得分:0)

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;
        }
    }
});

测试

  1. 打开Demo并在对话框中单击“确定”(这将添加cookie)。
  2. 重新加载页面。 Cookie应该存在,并且您将被重定向到index.html并显示“删除cookie”按钮(根据需要重复此步骤,它仍应执行此操作)。
  3. 按“删除Cookie”按钮,然后重新加载。现在它应该重定向到agree.htm并再次显示对话框。