jumpinjackie/gist:11362959

## gistfile1.html
<!DOCTYPE html>
<html>
    <head>
        <title>Chrome dun goof'd!</title>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="//underscorejs.org/underscore.js"></script>
        <script type="text/javascript" src="//backbonejs.org/backbone.js"></script>
        <script type="text/javascript">

            var AppRouter = Backbone.Router.extend({
                routes: {
                    "foo": "foo",
                    "bar": "bar",
                    "what": "what",
                    "home": "home"
                },
                foo: function() {
                    $("title").text("Chrome dun goof'd - foo");
                    $("#message").text("Route: foo");
                },
                bar: function() {
                    $("title").text("Chrome dun goof'd - bar");
                    $("#message").text("Route: bar");
                },
                what: function() {
                    $("title").text("Chrome dun goof'd - what");
                    $("#message").text("Route: what");
                },
                home: function() {
                    $("title").text("Chrome dun goof'd - home");
                    $("#message").text("Route: home");
                }
            });

            $(window).bind("beforeunload", function() {
                console.error("Did you hit the back button? If so, Chrome broke the Backbone router. Since when does going back from a hash change require a page refresh?");
                return false;
            });

            var router = null;

            $(document).ready(function() {
                router = new AppRouter();
                Backbone.history.start();
            });

            function navroute(hash) {
                window.location.hash = hash;
            }

            function getRoute() {
                var hash = Backbone.history.getHash();
                if (hash.indexOf("?") > 0) {
                    hash = hash.substring(0, hash.indexOf("?"));
                }
                return hash;
            }

            function tackParams() {
                var argStr = "";
                var prefix = "param";
                for (var i = 0; i < arguments.length; i++) {
                    if (i == 0)
                        argStr += prefix + (i + 1) + "=" + arguments[i];
                    else
                        argStr += "&" + prefix + (i + 1) + "=" + arguments[i];
                }
                //Backbone or raw, the effect still happens on Chrome

                //Backbone method
                //router.navigate(getRoute() + "?" + argStr, { trigger: false, replace: true });

                //Raw method
                window.location.replace("#" + getRoute() + "?" + argStr);
            }

        </script>
    </head>
    <body>
        <ul>
            <li>
                <button onclick='navroute("#foo")'>Foo</button>
            </li>
            <li>
                <button onclick='navroute("#bar")'>Bar</button>
            </li>
            <li>
                <button onclick='navroute("#what")'>What</button>
            </li>
            <li>
                <button onclick='navroute("#home")'>Home</button>
            </li>
        </ul>
        <ul>
            <li>
                <button onclick='tackParams(1)'>Set 1 param</button>
            </li>
            <li>
                <button onclick='tackParams(1, 2)'>Set 2 params</button>
            </li>
            <li>
                <button onclick='tackParams(1, 2, 3)'>Set 3 params</button>
            </li>
            <li>
                <button onclick='tackParams(1, 2, 3, 4)'>Set 4 params</button>
            </li>
        </ul>
        <div id="message">
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Chrome dun goof'd!</title>
	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="//underscorejs.org/underscore.js"></script>
	<script type="text/javascript" src="//backbonejs.org/backbone.js"></script>
	<script type="text/javascript">

	var AppRouter = Backbone.Router.extend({
	routes: {
	"foo": "foo",
	"bar": "bar",
	"what": "what",
	"home": "home"
	},
	foo: function() {
	$("title").text("Chrome dun goof'd - foo");
	$("#message").text("Route: foo");
	},
	bar: function() {
	$("title").text("Chrome dun goof'd - bar");
	$("#message").text("Route: bar");
	},
	what: function() {
	$("title").text("Chrome dun goof'd - what");
	$("#message").text("Route: what");
	},
	home: function() {
	$("title").text("Chrome dun goof'd - home");
	$("#message").text("Route: home");
	}
	});

	$(window).bind("beforeunload", function() {
	console.error("Did you hit the back button? If so, Chrome broke the Backbone router. Since when does going back from a hash change require a page refresh?");
	return false;
	});

	var router = null;

	$(document).ready(function() {
	router = new AppRouter();
	Backbone.history.start();
	});

	function navroute(hash) {
	window.location.hash = hash;
	}

	function getRoute() {
	var hash = Backbone.history.getHash();
	if (hash.indexOf("?") > 0) {
	hash = hash.substring(0, hash.indexOf("?"));
	}
	return hash;
	}

	function tackParams() {
	var argStr = "";
	var prefix = "param";
	for (var i = 0; i < arguments.length; i++) {
	if (i == 0)
	argStr += prefix + (i + 1) + "=" + arguments[i];
	else
	argStr += "&" + prefix + (i + 1) + "=" + arguments[i];
	}
	//Backbone or raw, the effect still happens on Chrome

	//Backbone method
	//router.navigate(getRoute() + "?" + argStr, { trigger: false, replace: true });

	//Raw method
	window.location.replace("#" + getRoute() + "?" + argStr);
	}

	</script>
	</head>
	<body>
	<ul>
	<li>
	<button onclick='navroute("#foo")'>Foo</button>
	</li>
	<li>
	<button onclick='navroute("#bar")'>Bar</button>
	</li>
	<li>
	<button onclick='navroute("#what")'>What</button>
	</li>
	<li>
	<button onclick='navroute("#home")'>Home</button>
	</li>
	</ul>
	<ul>
	<li>
	<button onclick='tackParams(1)'>Set 1 param</button>
	</li>
	<li>
	<button onclick='tackParams(1, 2)'>Set 2 params</button>
	</li>
	<li>
	<button onclick='tackParams(1, 2, 3)'>Set 3 params</button>
	</li>
	<li>
	<button onclick='tackParams(1, 2, 3, 4)'>Set 4 params</button>
	</li>
	</ul>
	<div id="message">
	</div>
	</body>
	</html>