javascript - Javascript 的某些部分在 Chrome 中无法运行，但在其他浏览器中运行良好

Question

一般信息:我正在尝试创建一个弹出模式窗口来验证客户邮政编码 - 该网站仅适用于特定代码范围内的人，所以我只需要它弹出，接受他们的输入，如果他们有资格购物、关闭、让他们购物，并且至少在 session 期间不再出现，如果他们没有资格，则将他们重定向到另一个网站。

我让它在 Firefox、Edge 和 IE 中完美运行，但 Chrome 在运行大部分时都很好，完全忽略了其他部分。这是我第一次真正尝试使用 Javascript 做任何事情，所以我希望这是一个简单的答案。

另一个注意事项:对于所有被注释掉的行，我深表歉意，我一直在努力密切跟踪我去过的地方，以便在必要时可以更轻松地撤消我的更改。

HTML:

<!--START: ZipCheckModal-->
<!-- Trigger/Open The Modal -->
<!--<button id="myBtn">Open Modal</button>-->

<!-- The Modal -->
<div id="zipModal" class="zipmodal">

<!-- Modal content -->
<div class="zipmodal-content">
<div class="zipmodal-header">
  <span class="close">×</span>
  <h2>Welcome to Nature's Warehouse Ohio!</h2>
</div>
<div class="zipmodal-body">
  <div class="overblur">
<div class="zipcheckarea" id="zipcheckarea"><h1>Check your zip code</h1><br /><p>This site is for customers within our Ohio Local Delivery Zone.  Check to see if you're eligible!</p><br />

<form class="zipbox">
  <input type="number" id="custzip" placeholder="Your Zip" maxlength="5"/><br />

  <input type="submit" id="zipbtn" value="Check Zip" onclick="checkZip()" /><br />

</form></div></div>
</div>

一些内联的 Javascript，紧接在上面的下面(在某些时候我无法让它在单独的文件中运行，所以我只是将它留在内联)

// Get the modal
var zipmodal = document.getElementById('zipModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the window opens, open the modal 
//Add "if there is no cookie" here
checkZipCookie();
//window.onload = function() {
//    zipmodal.style.display = "block";
//}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
zipmodal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
//window.onclick = function(event) {
//    if (event.target == zipmodal) {
//        zipmodal.style.display = "none";
//    }
//}

最后，单独的 Javascript 文件:

function checkZip() {
var custzip = document.getElementById("custzip").value;
var ziparray = ["44606", "43803", "43804", "44608", "44610", "44611", "43805", "44612", "44613", "44617", "44618", "44622", "44624", "44627", "43824", "44628", "44633", "43828", "44636", "44637", "44638", "44647", "44654", "44659", "44660", "44661", "44662", "44666", "44667", "44676", "44677", "43840", "44680", "44681", "44687", "44689", "44690", "44691", "44697"];
if (ziparray.indexOf(custzip) > -1) {
document.getElementById("zipcheckarea").innerHTML = "You qualify for same-day delivery!\nIn a moment you will be redirected to the home page."; 
document.getElementById("zipcheckarea").className = "delaymsg";
setTimeout(sendOH, 3000);
} else {
document.getElementById("zipcheckarea").innerHTML = "We're sorry, you don't qualify for same-day delivery.\nTry our regular website, where we offer FREE shipping on orders over $24.95!"; 
document.getElementById("zipcheckarea").className = "delaymsg";
setTimeout(sendNY, 4000);
}
}

function sendOH() {
setZipCookie("resident");
zipmodal.style.display = "none";
//window.location.href = "http://ohio.natureswarehouse.net";
}
function sendNY() {
window.location.href = "http://natureswarehouse.net";
}

function setZipCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getZipCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') {
        c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
        return c.substring(name.length,c.length);
    }
}
return "";
}

function checkZipCookie() {
var isCookie = getZipCookie("resident");
if (isCookie != "") {
    //Show nothing, free to browse
} else {
//Run the modal window
window.onload = function() {
  zipmodal.style.display="block";
}
}
}

我看到的问题是 1) Chrome 没有遵循正确的关闭模式/重定向，无论输入是什么，它都只是关闭模式窗口，2) 在重定向之前忽略超时，3) 没有t 设置 cookie，因此模式每次都会弹出。我在 codepen 中遇到了同样的问题(但仅在 Chrome 中)，它似乎在其他浏览器中运行完美。

我的控制台或任何东西都没有收到任何错误，Chrome 似乎认为它做的一切都是正确的。如果您想查看实际模型，请访问 ####。

Answer 1

其他浏览器的行为如您所料，这真的很奇怪。

重定向的原因是表单提交，这是由点击“提交”类型的输入引起的。

您可能想阻止表单提交:

document.querySelector('form.zipbox').onsubmit = function (e) { e.preventDefault(); };