0

我是一个网络新手，所以我将首先表达我的问题，以防有比我尝试实现它的方式更好的解决方案。

我已将网站的内容更改为通过 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;

我正在使用此代码将参数添加到 URL 而不重新加载页面（使用 # 标签），但是，如果用户已经在带有类似“# ?cat=things&page=stuff” 在 URL 中。

我可能对此过于复杂，但长话短说，有没有一种方法可以在不发送 HTTP 请求/重新加载页面且不使用 # 开头的情况下向 URL 添加参数？

再说一次，如果有一个完全解决一般问题的方法，我会欢迎它:)

4

2 回答 2

1

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

function processParams() {
  var params = window.location.hash;
  // do something with params
}

$(window).on('hashchange', processParams);
于 2013-09-04T12:54:53.790 回答
0

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

于 2013-09-04T12:24:03.213 回答