使用Javascript加载内容，但仍然保留到特定内容页面的唯一链接

Load content with Javascript, but still retain a unique link to specific content pages

本文关键字：链接 唯一 加载 Javascript 使用 保留      更新时间：2023-09-26

我是一个网络新手，所以我会从表达我的问题开始，以防有比我试图实现的方法更好的解决方案。

我已经通过jQuery load（）函数将我的网站内容更改为动态加载，这样就不会每次只有唯一的文档内容更改时都请求整个页面。然而，我希望该网站仍然可以像用户通过URL访问文档的直接地址一样，将用户带到特定的内容（这样用户就可以链接到特定的页面）。

我用URL参数实现了这一点，例如"&cat=1&page=2"，并使用jQuery获得它们，并将正确的文件加载到#content区域。因此，当用户单击导航中的链接时，它会加载相关内容，并将页面的参数添加到URL中，就像我举的例子一样。

这是我的代码：

//Adding location params to URL when navigation link is clicked
$("#innerNavbar > ul > li > a").on('click', function(){
    var cat = $(this).parent().parent().attr('id');
    var page = $(this).attr('name');
    var path = "categories/"+cat+"/"+page+".php";
    window.location = "#?cat="+cat+"&page="+page;
    $("#content").load(path);
});
//Get URL params and load correct page
var path = "categories/";
var cat = $.getUrlVar('cat'); //External code in getURLparams.js
var page = $.getUrlVar('page');
if (cat){
    if (page){
        path = "categories/"+cat+"/"+page+".php";
    } else {
        path = "categories/"+cat+"/index.php";
    }
} else {
    path = "categories/pages/index.php";
}
$("#content").load(path);

我遇到问题的具体代码是：

window.location = "#?cat="+cat+"&page="+page;

我使用这段代码将params添加到URL中，而无需重新加载页面（带有#标记），然而，如果用户已经在URL中有类似"#？cat=things&page=stuff"的内容，则#将意味着不会重新加载页面。

我可能已经把这件事弄得太复杂了，但长话短说，有没有一种方法可以在URL中添加params，而无需发送HTTP请求/重新加载页面，也无需在开始时使用#？

同样，如果有一个完全解决一般问题的方法，我会欢迎它：）

如果您不想像@Alejandro González提到的那样开始使用单页应用程序框架，那么最好在窗口上检查hashchange事件并调用函数

function processParams() {
  var params = window.location.hash;
  // do something with params
}
$(window).on('hashchange', processParams);

您想要实现的似乎更像是一个单页应用程序。有一些javascript库可以帮助您按照描述的方式构建应用程序。看看Sammy.js或History.js库。

相关文章：