javascript - 使用 jQuery.load 时如何获取和更改 url

Question

我想根据菜单页面更改 url，以便轻松共享链接给其他人，因为每个页面都有自己的 url 名称。

所以，我有一个加载文件内容的函数。但是如何将 url 也更改到函数中来实现呢？

<script>
    function getfile(data) {
        var file= data+'.html';
        $('#content').load(file);
    }
</script>

这是使用onclick函数的导航。

<ul>
    <li><a href="#" onclick="getfile('profile')">Profile</a> </li>
    <li><a href="#" onclick="getfile('about')">About</a> </li>
    <li><a href="#" onclick="getfile('contact')">Contact</a> </li>    
</ul>


<div id="content"></div>

Answer 1

您可以使用History API 。 pushState method将允许您更改当前页面的 URL，而无需重新加载内容。

示例:

<script>
    function getfile(data) {
        var file= data+'.html';
        $('#content').load(file);
        history.pushState(null, null, file);
    }
</script>

您可能还对 the popstate event 感兴趣，检测浏览器何时返回到之前的页面。

更新:

为了加载子目录的文件，您需要知道站点根目录的路径。如果站点位于根目录，则类似以下内容将起作用。

<script>
    var rootPath = '/';
    function getfile(data) {
        var file= rootPath+data+'.html';
        $('#content').load(file);
        history.pushState(null, null, file);
    }
</script>