Question

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

1）我被迫包含包含这些的router.js文件每个模板中的函数？我想要一个包含这些的html 仅限功能。模板应该只包含HTML及其相应的脚本。我设法完成了，但如果用户刷新模板显示的页面，无需样式或任何东西。是使用哈希答案？或者，如果用户关闭浏览器并拥有 “恢复上一页”选项激活模板即可仅使用html加载。

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

我也知道facebook使用popstate用于现代浏览器，而hashchange用于较旧版本，可能包括Modernizr.js或一些自定义库。但路由器如何工作而不将其包含在每个模板中？

提前致谢。

Answer 1

我找到了！我错过了路由器的主要代码，即检索当前url以正则表达式（或任何其他方式）获取参数并动态加载内容。此外，我错误地推送了所请求模板的完整路径（要注入的页面），而不是像查询字符串或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 +＆＃39; ＆GT;   .injection-container＆gt; *＆＃39;

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

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

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

了解Jquery SPA实施

1 个答案: