首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >修改查询字符串而不重新加载页面

修改查询字符串而不重新加载页面
EN

Stack Overflow用户
提问于 2012-06-10 23:48:08
回答 9查看 134.3K关注 0票数 149

我正在创建一个相册,并希望能够改变查询字符串和标题时,照片被浏览。

我正在寻找的行为经常出现在连续/无限页面的一些实现中,当您向下滚动时,查询字符串会不断递增页码(http://x.com?page=4)等。这在理论上应该很简单,但我想要的是跨主要浏览器安全的东西。

我找到了this great post,并尝试用window.history.pushstate学习这个例子,但这似乎对我不起作用。我不确定它是否是理想的,因为我并不真正关心修改浏览器历史记录。

我只想能够提供的能力,以书签的当前查看的照片,而不是每次重新加载的照片被更改的页面。

以下是修改查询字符串的无限页面的示例:http://tumbledry.org/

UPDATE发现此方法:

代码语言:javascript
复制
window.location.href = window.location.href + '#abc';

它看起来很适合我,但我用的是新的铬合金..这可能会导致一些旧浏览器的问题?

EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2013-10-10 02:05:06

如果您正在寻找Hash修改,您的解决方案工作良好。但是,如果您想要更改查询,则可以使用pushState。下面是一个可能帮助您正确实现它的示例。我测试了一下,它工作得很好:

代码语言:javascript
复制
if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

它不会重新加载页面,但只允许您更改URL查询。您将无法更改协议或主机值。当然,它需要能够处理HTML5历史API的现代浏览器。

有关详细信息,请参阅:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

票数 239
EN

Stack Overflow用户

发布于 2018-12-26 16:55:42

我想改进Fabio的答案,并创建一个函数,无需重新加载页面即可向URL字符串添加自定义键。

代码语言:javascript
复制
function insertUrlParam(key, value) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }
}
票数 34
EN

Stack Overflow用户

发布于 2018-02-21 00:00:53

根据Fabio的回答,我创建了两个函数,这两个函数可能对遇到这个问题的任何人都有用。使用这两个函数,您可以使用键和值作为参数来调用insertParam()。它将添加URL参数,或者,如果已存在具有相同键的查询参数,则会将该参数更改为新值:

代码语言:javascript
复制
//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
        return url;
    } else {
        return url;
    }
}

//function to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrlWithOutHash.indexOf('?') !== -1){
            queryStart = '&';
        } else {
            queryStart = '?';
        }

        var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
        window.history.pushState({path:newurl},'',newurl);
    }
}
票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10970078

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档