javascript - 如何在单页 javascript/html5 应用程序中设置 href

Question

我使用 python/django/backbone 构建了一个“小型”单页 Web 应用程序(它大致相当于一个简单的待办事项列表应用程序)。

但是我还没有解决拥有全部href的问题属性集(出于 SEO 目的)，但阻止用户的浏览器在新 URL 重新加载整个应用程序。

问题的简化示例:

鉴于此 html 片段无法从中减去(可以添加到):

<a href="/myaccount/" >My Account</a>

当用户点击 a 时，如何实现以下效果？元素:

1. 不要不向服务器发送/myaccount/的请求
2. 请将浏览器地址更新为 http://www.example.com/myaccount/

该解决方案不需要依赖主干的任何现有功能。我假设要求 (2)确实需要 HTML5，这很好。

关于研究这个问题的说明:我已经进行了通常的谷歌搜索，以在大多数解决方案中找到一个共同的想法。主要思想是使用onclick在 a元素而不是设置 href然后利用HTML5的pushstate API，但这不是我的问题的解决方案。通过尝试这个解决方案，我发现有 href set 导致浏览器发送对/myaccount/的请求，无论我在 onclick 上输入什么内容.

Answer 1

我认为提供的 HTML 代码片段是 Backbone View 的一部分，即。以模板的形式。首先，添加一个对您的代码有意义的选择器，例如类:

<a href="/myaccount/" class="navigation-element" >My Account</a>

然后，在您的 Backbone View 中添加一个事件处理程序并使用 PreventDefault() 方法来防止传播单击事件:

events: {
    'click .navigation-element': 'onNavigationElementClick'
},
onNavigationElementClick: function(e) {
    e.preventDefault();
    /* Here comes your magic */
},

这里重要的一点是捕获事件并防止浏览器跟踪链接。这是通过 PreventDefault 方法完成的。