Javascript的某些部分在Chrome中不起作用,但在其他浏览器中可以完美工作
Some parts of Javascript not working in Chrome, but work perfectly in other browsers
一般信息:我正在尝试创建一个弹出模式窗口来验证客户的邮政编码-该网站只适用于特定代码范围内的人,所以我只需要它弹出,接受他们的输入,如果他们有资格购物,关闭,让他们购物,至少在会话中不再出现,如果他们没有资格,则将他们重定向到另一个网站。
我在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(); };
相关文章:
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- java脚本在Chrome和其他浏览器中对LocaleTimeString的不同行为
- Javascript的某些部分在Chrome中不起作用,但在其他浏览器中可以完美工作
- 在BoilerplateJS浏览器加载所有脚本(在其他模块中),而不考虑激活的模块
- 防止“;jQuery(html)"防止触发浏览器请求图像和其他参考内容
- 如何隐藏空<span>在IE中使用javascript.(注意,在其他浏览器中工作正常)
- 我的时间倒计时脚本在谷歌浏览器中工作正常,但在其他浏览器中打开时它显示为南楠
- 如何使用javascript从同一浏览器下的其他页面获取URL?有可能吗
- 使用一个Javascript函数提交多个表单可以在FF中工作,而不需要其他浏览器
- 带有Safari的Javascript;不起作用——所有其他浏览器都起作用
- Javascript可以在chrome中使用,但不能在其他浏览器中使用
- 有没有一种方法可以在过滤掉iOS Chrome、Firefox和其他浏览器的同时检测iOS safari
- 在其他浏览器中打开页面时,令牌未保存在$window.sessionStorage中
- 编写脚本以关闭其他选项卡或浏览器
- 无法从IE中的data.responseText获取结果,但在其他浏览器中工作
- 在Firefox中使用锤子捏 错误地定向 - 适用于所有其他浏览器
- 在IE8和其他带有javascript的浏览器中获取正文类的标准解决方案是什么
- 索引在IE中导致错误;在其他浏览器中工作
- 将JSON对象转换为敲除observable在IE8中不起作用,但在所有其他浏览器中都起作用