我遇到了一个奇怪的问题,我认为可能是Chrome错误,也可能是Visual Studio的错误。我的脚本被加载了两次。为了验证这个问题,我创建了一个测试脚本,该脚本设置了一个带有时间戳的cookie,以显示代码被追加了两次。如果我通过超链接导航到页面,它可以正常工作。此外,如果我点击来回按钮,它也可以正常工作——,但如果我在浏览器中手动键入第二个页面的url,它会调用脚本两次。
这种情况仅在Chrome中发生,并且仅在使用Asp时发生。Net Web应用程序 如果我使用Asp。Net网站,它不会发生。这些是新的空web应用程序,没有更改任何额外的文件或设置。
我的示例html页面如下所示:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page 1</title>
<script src="chromebug.js"></script>
</head>
<body>
<h1>Page 1</h1>
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
</body>
</html>
chromebug.js看起来是这样的:
function getCookieTest(name) {
var cookie, cookies = document.cookie.split(';');
name = name + '=';
while ((cookie = cookies.pop())) {
cookie = cookie.replace(/^s+/, '');
if (cookie.indexOf(name) === 0) {
return cookie.substring(name.length, cookie.length);
}
}
return null;
}
function setCookieTest(name, value, secs) {
var c;
if (secs > 0) {
c = new Date();
c.setSeconds(c.getSeconds() + secs);
c = name + '=' + value + '; expires=' + c.toGMTString() + '; path=/';
} else {
c = name + '=' + value + '; path=/';
}
document.cookie = c;
return
}
console.log('chromebug loaded');
var getdata = getCookieTest('loaded') || '';
setCookieTest('loaded', getdata.toString() + document.title + ':' + new Date().getTime().toString() + '|', 10000);
getdata = getCookieTest('loaded');
console.log(getdata); // show what has been saved in the cookie
我是不是错过了什么?有办法解决这个问题吗
我甚至制作了一个视频来演示这个问题:http://screencast.com/t/MpXfbDMBvfY
非常感谢stdob为我提供了LiveHTTPHeaders扩展。如果你有类似的问题,我会推荐它。https://chrome.google.com/webstore/detail/live-http-headers/iaiioopjkcekapmldfgbebdclcnpgnlo?hl=en
在我的案例中,问题在于Google Chrome的预取优化。当你在地址栏中键入时,谷歌会预料到你将要加载的页面,并开始下拉脚本。如果你的脚本在加载时预成型了一些加载或cookie操作,这是有问题的。当您取消选中此选项时,您应该会看到重复加载消失。
然而,这是一种简单的控制方式,无需更改您的设置。这一点尤其重要,因为您无法控制最终用户的设置。
if (document.webkitVisibilityState && document.webkitVisibilityState == 'prerender') {
// avoid performing load logic
}
当用户手动在地址栏中键入url时,Chrome似乎有不明显的行为。您可以使用一些工具,如Chrome实时http头来捕捉这种行为。