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

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

javascript jquery

Javascript 基于哈希或查询字符串加载动态内容,javascript,jquery,Javascript,Jquery,我将创建一个单页javascript应用程序。它将根据正在修改的url加载不同的页面内容，根据浏览器的不同，通过哈希或html历史API加载我的想法是使用它，以便为较旧的浏览器提供哈希回退 var location = window.history.location || window.location; handleUrlChange(location.href); $(document).on('click', 'a.ajax', function(e) { e.prevent

我将创建一个单页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');
}

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

有很多解决方案，比如：

你可以选择最适合你的。如果您不想使用诸如模型、集合或angular framework之类的主干功能，并且只需要路由，请使用crossroads.js或finch.js，或者只需键入google：“Javascript路由”来查找其他库

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

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

谢谢，我发现这似乎很好。我需要下载整个主干库才能使用其路由器吗？是的，为了使用主干路由器，需要整个主干库，加上下划线和jquery，主干依赖于哪个。

<!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>