1

在过去的几个小时里，我一直在徒劳地尝试学习History.js。我已经创建了三个非常简单的测试文件，但我似乎无法让任何工作。这是我的三个文件的内容。

历史.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>

历史.js：

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

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

关于.html：

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

当我单击“关于”链接时，为什么 statechange 事件不触发或我的 handleStateChange() 函数不执行？

4

1 回答 1

1

我会回答我自己的问题，以防它帮助别人。我的错误印象是，只要浏览器的 URL 发生变化（例如单击链接或单击后退按钮），就会触发“statechange”事件。我发现只有当您将某些内容推送到历史记录时才会触发“状态更改”。所以我更新了我的 JavaScript 以向链接添加一个监听器......

历史.js：

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

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

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

于 2013-06-20T14:20:48.147 回答