正在从花哨的jQuery URL中删除哈希

Removing hash from fancy jQuery URL

本文关键字：URL 删除 哈希 jQuery      更新时间：2023-09-26

我有一个用jQuery编写的Google Instant风格的搜索脚本。当用户查询时，#search/SEARCHTRM/1/会添加到我的页面URL中。如何使我的URL开头没有#？

这是我当前的jQuery代码：

$(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var yt_url='search.php?q='+query+'&category=web';
        window.location.hash='search/'+query+'/1/';
        document.title=$(this).val()+" - My Search Script";
        if(search==''){
            window.location.hash='';
            document.title='My Search Script';
        }
        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"html",
            success:function(response){
                $("#result").html(response);
            }
        });
    });
});

您不能从hash中删除hash：），但您可以使用pushState（）方法更改整个url。

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState（）.c2.a0方法

pushState（）接受三个参数：state对象，标题（当前已忽略），以及（可选）URL。

URL--新历史记录条目的URL为由该参数给定。请注意浏览器不会尝试加载此URL在调用pushState（）之后可能稍后尝试加载URL，例如，在用户重新启动之后她的浏览器。新URL不需要绝对；如果是相对的，那就是已相对于当前URL解析。

请注意，这在旧的浏览器中不起作用，并且您必须在使用JS生成的每个url后面都有内容。

您正在更改"window.location.hash"。很难从哈希中删除哈希：）

你是想改变"窗口位置"吗？

要在没有URL哈希或查询字符串的情况下完成此操作，您可能需要在后端进行一些URL重写。

你可以用一个.htaccess文件来完成，它看起来像这样：

DirectoryIndex search.php    
RewriteEngine on
# If the requested file or directory does not exist
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# silently redirect to the search page
RewriteRule ^search/(.*)$ search.php?q=$1 [L,QSA]

jQuery代码仍然需要使用搜索字符串来查询PHP脚本，但从客户端的角度来看，URL将使用search/searchterm/1/样式。

正如Epeli所指出的，要做到这一点，既不需要哈希，也不需要不断地强制页面重新加载，您需要使用history.pushState()来更改URL，而不是更改window.location。

如果您需要将pushState()集成到jQuery代码中的帮助，我可以稍后更新。

相关文章：