Javascript的某些部分在Chrome中不起作用,但在其他浏览器中可以完美工作

Some parts of Javascript not working in Chrome, but work perfectly in other browsers

本文关键字:浏览器 其他 工作 完美 不起作用 些部 Javascript Chrome      更新时间:2023-09-26

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

我在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)没有设置cookie,所以每次都会弹出模式。我在codepen中也遇到了同样的问题(但仅在Chrome中),而且它在其他浏览器中似乎运行得很完美。

我的控制台上没有任何错误,Chrome似乎认为它做得很好。如果您想查看实际模型,请访问####。

其他浏览器的行为真的很奇怪。

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

您可能希望阻止表单提交:

document.querySelector('form.zipbox').onsubmit = function (e) { e.preventDefault(); };
相关文章: