0

我正在尝试使用 JQuery 创建一个 SPA 网站。我知道如何使用history.pushState，$(window).on('popstate')但我有几个问题。目前我有一个处理 popstate 事件和导航链接的 router.js 文件。我将链接放在自定义属性（data-navId="templates/page/page.html"）或 href 中并使用 $(e).preventDefault(); . 用户点击链接并被$('.page-content').load('url', function() {})执行history.pushstate。

1）我是否被迫在每个模板中包含包含这些功能的 router.js 文件？我想要一个仅包含这些功能的 html。模板应仅包含 HTML 及其相应的脚本。我设法做到了这一点，但是如果用户刷新页面，模板将显示没有样式或任何东西。使用哈希是答案吗？或者，如果用户关闭浏览器并激活“恢复以前的页面”选项，则模板将仅加载其 html。

过去我开发的 SPA 页面不使用哈希popstate，history.pushState但我必须在每个文件中包含所有 html，然后调用$('.page-content').load(url + ' .page-content > *', function() {});以避免刷新错误。

我也知道 facebookpopstate用于现代浏览器和hashchange旧版浏览器，可能包括 Modernizr.js 或一些自定义库。但是路由器如何在不包含在每个模板中的情况下工作？

提前致谢。

4

1 回答 1

0

我找到了！我错过了路由器的主要代码，即检索当前 url 使用正则表达式（或任何其他方式）获取参数并动态加载内容。我也犯了一个错误，即推送请求的模板（要注入的页面）的完整路径，而不是像查询字符串或 via 那样处理它mod_rewrite(Apache)。

来源（查询字符串）：https ://stackoverflow.com/a/901144/6128301

总结一下：1）用户点击链接，执行如下代码：

$('url').on('click', function(e) {
   e.preventDefault();

   var url = $(this).attr('href');
   $('.injection-container').load(url + ' > * ', function() {

      history.pushState({'state': "index?p=" + url}, "Injected Page's Title", "index?p=" + url);

   });

});

e.preventDefault= 防止默认链接（href 标记）重定向。injection-container = 要加载内容的页面

url + ' > * '= 要获取的内容。星号代表所有元素。您还可以使用以下方法加载注入页面的主要内容： url + ' > .injection-container > * '

索引是包含所有 CSS 和 JS 的主页。您还应该创建一个 router.js 文件，该文件检查查询字符串并决定将动态加载哪个页面。请注意，上面没有 .html 扩展名，因为我使用 mod_rewrite 配置了我的 apache 以清除扩展名。window.location.href或者，您可以通过获取 url ( )来替换扩展名。

你需要的最后一件事是这段代码：

$(window).on('popsate', function() { // PageInjector function like before... })

于 2017-10-14T18:57:40.087 回答