Chrome loading script twice when manually typing url to move to next page

I am having a bizarre issue that I’m thinking may be a Chrome bug or possibly a bug with Visual Studio. My script is getting loaded twice. To verify the issue I created a test script that sets a cookie with a timestamp to show the code is getting appended twice. If I navigate to the page via a hyperlink it works fine. Also if I hit the back and forth buttons it also works fine — but if I manually type the url for the second page in the browser it calls the script twice.

This only happens in Chrome and only when using a Asp.Net Web Application. If I use a Asp.Net website, it does not occur. These are new empty web applications with no extra files or settings changed.

My example html pages look like this:

<!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" rel="nofollow noreferrer noopener">Page 1</a>
    <a href="page2.html" rel="nofollow noreferrer noopener">Page 2</a>
    <a href="page3.html" rel="nofollow noreferrer noopener">Page 3</a>
</body>
</html>

And the chromebug.js look like this:

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

Am I missing something? Any way to work around this?

I even created a video where the issue is demonstrated:
http://screencast.com/t/MpXfbDMBvfY

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Thanks so much to stdob for pointing me to the Live HTTP Headers extension. I’d recommend it if you are having a similar issue.
https://chrome.google.com/webstore/detail/live-http-headers/iaiioopjkcekapmldfgbebdclcnpgnlo?hl=en

The issue in my case is with the Google Chrome prefetch optimization. When you type in the address bar, Google anticipates the page you will be loading and starts pulling down the scripts. If your script preforms some loading or cookie action upon loading this is problematic. When you uncheck this option you should see the duplicate loads go away.

However this is an easy way to control this without changing your settings. This is especially important since you have no control over your end-user’s settings.

if (document.webkitVisibilityState && document.webkitVisibilityState == 'prerender') {
// avoid performing load logic
}

Method 2

It’s look like Chrome have non-obvious behavior when user manualy typing url in address bar. You can use some tools like Chrome live http headers to catch this behavior.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating