Javascript 将参数附加到 URL 而不刷新

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32828160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 14:15:42  来源:igfitidea点击:

Appending parameter to URL without refresh

javascriptjqueryhtmlpushstatehtml5-history

提问by Mina Hafzalla

I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brandon button click without refresh.

我知道这之前已经被问过很多次了,但答案的描述不足以解决我的问题。我不想更改页面的整个 URL。我想&item=brand在按钮点击时附加一个参数而不刷新。

Using document.location.search += '&item=brand';makes the page refresh.

使用document.location.search += '&item=brand';使页面刷新。

Using window.location.hash = "&item=brand";append without refresh but with a hash #which eliminates the usage/effect of the parameter. I tried to remove the hash after appending but that didn't work.

使用window.location.hash = "&item=brand";append 而不刷新但使用哈希#消除参数的使用/影响。我试图在追加后删除哈希,但这没有用。



This answerand many others suggest the use of HTML5 History API, specifically the history.pushStatemethod, and for old browsers is to set a fragment identifier to prevent page from reloading. But how?

This answer和许多其他人建议使用HTML5 History API,特别是该history.pushState方法,对于旧浏览器是设置片段标识符以防止页面重新加载。但是如何?



Assuming the URL is: http://example.com/search.php?lang=en

假设网址是: http://example.com/search.php?lang=en

How can I append &item=brandusing HTML5 pushState method or a fragment identifier so the output would be like this: http://example.com/search.php?lang=en&item=brandwithout a page refresh?

如何&item=brand使用 HTML5 pushState 方法或片段标识符进行附加,以便输出如下所示:http://example.com/search.php?lang=en&item=brand没有页面刷新?



I hope someone can throw some light on how to use the HTML5 pushState to append a parameter to an existing/current URL. Or alternatively how to set a fragment identifier for the same purpose. A good tutorial, demo or piece of code with a little explanation would be great.

我希望有人可以了解如何使用 HTML5 pushState 将参数附加到现有/当前 URL。或者,如何为相同目的设置片段标识符。一个很好的教程、演示或一段代码加上一点解释会很棒。

Demoof what I've done so far. Your answers would be greatly appreciated.

到目前为止我所做的演示。您的回答将不胜感激。

回答by CONvid19

You can use the pushStateor replaceStatemethods, i.e.:

您可以使用pushStatereplaceState方法,即:

window.history.pushState("object or string", "Title", "new url");

OR

或者

window.history.replaceState(null, null, "/another-new-url");

Example with argument:

带参数的示例:

let refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';    
window.history.pushState({ path: refresh }, '', refresh);

回答by pablobascones

If anyone wants to add a parameter to a more complex url (I mean, https://stackoverflow.com/questions/edit?newParameter=1), the following code worked for me:

如果有人想向更复杂的 url 添加参数(我的意思是https://stackoverflow.com/questions/edit?newParameter=1),以下代码对我有用:

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?newParameter=1';
window.history.pushState({ path: newurl }, '', newurl);

Hope this helps!

希望这可以帮助!