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
Appending parameter to URL without refresh
提问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=brand
on 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.pushState
method, 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=brand
using HTML5 pushState method or a fragment identifier so the output would be like this: http://example.com/search.php?lang=en&item=brand
without 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.:
您可以使用pushState或replaceState方法,即:
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!
希望这可以帮助!