基于哈希或查询字符串加载动态内容

Loading dynamic content based on hash or query string

本文关键字：动态 加载 字符串 于哈希 查询      更新时间：2023-09-26

我要创建一个单页的javascript应用程序。它将根据正在修改的 url 加载不同的页面内容，通过哈希或 html 历史记录 API 加载，具体取决于浏览器。

我虽然使用此插件是为了为旧浏览器提供哈希回退。

var location = window.history.location || window.location;
handleUrlChange(location.href);
$(document).on('click', 'a.ajax', function(e) {
    e.preventDefault();
    history.pushState(null, null, this.href);
    handleUrlChange(this.href);
});
$(window).on('popstate', function(e) {
    handleUrlChange(location.href);      
});
function handleUrlChange(url){
     // example url: www.foo.com?page=details&id=1
     var page = getQueryStringParam('page') || 'index';
     $('#dynamic-content').load(page + '.html');
}

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
</head>
    <body>
         <div id="header"></div>
         <div id="dynamic-content"></div>
         <div id="footer"></div>
    </body>
</html>

我的问题是是否有任何框架已经这样做了？我不想在这里重新发明轮子。

有很多解决方案，例如：

  1. https://millermedeiros.github.io/crossroads.js/
  2. http://stoodder.github.io/finchjs/
  3. http://backbonejs.org/#Router
  4. https://docs.angularjs.org/tutorial/step_07

您可以选择最适合您的。如果你不想使用模型或集合等骨干功能，或者角度框架，并且只需要路由，请使用crossroads.js或finch.js，或者只是输入google："Javascript routeting"来查找其他库。

就个人而言，我只使用骨干路由。

http://backbonejs.org/#Router

它易于使用，自动检查是否可以使用历史记录 API，如果不能，则使用哈希导航。

相关文章：