我要创建一个单页的javascript应用程序。它将根据被修改的URL加载不同的页面内容,可以通过哈希值或html历史记录API加载,具体取决于浏览器。
我的目的是使用此plugin以便为旧版浏览器提供哈希回退。
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>
我的问题是,是否有任何框架已经这样做了?我不想在这里重新发明轮子。
答案 0 :(得分:2)
有很多解决方案,例如:
您可以选择最适合您的选项。如果您不想使用模型或集合等主干功能或角度框架,并且只需要路由,请使用crossroads.js或finch.js,或者只需输入google:&#34; Javascript routing&#34 ;找到其他图书馆。
就个人而言,我只使用骨干路由。
它易于使用,可自动检查是否可以使用History API,如果没有,则使用哈希导航。