Question

在过去的几个小时里，我一直在努力学习History.js。我创建了三个非常简单的测试文件，但我似乎无法正常工作。以下是我的三个文件的内容。

history.html：

<!doctype html>
<html>
    <head>
        <title>History Test</title>
        <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="jquery.history.js"></script>
        <script type="text/javascript" src="history.js"></script>
    </head>
    <body>
        <a href="about.html">about</a>
    </body>
</html>

history.js：

$(document).ready(function() {
    History.Adapter.bind(window, 'statechange', handleStateChange);
});

function handleStateChange() {
    alert("State changed...");
}

about.html：

<!doctype html>
<html>
    <head>
        <title>About</title>
    </head>
    <body>
        About...
    </body>
</html>

当我点击'about'链接时，为什么statechange事件不会激活或handleStateChange（）函数执行？

Answer 1

我会回答我自己的问题，以防它帮助其他人。我误以为“状态转换”事件会在浏览器的URL发生变化时触发（例如，单击链接或单击后退按钮）。我发现，“状态变化”只会在你将某些东西推到历史上时触发。所以我更新了我的JavaScript，为链接添加了一个监听器...

history.js：

$(document).ready(function() {
    History.Adapter.bind(window, 'statechange', handleStateChange);
    $("#about").click(function() {
        History.pushState(null, null, "about.html");
    });
});

function handleStateChange() {
    alert("State changed...");
}

...现在，当我点击链接并点击浏览器的后退按钮时，我会收到警报。

如何开始使用history.js？

1 个答案: