如何在不重定向的情况下更改 URL？答案

【问题标题】：How to change URL without redirect?如何在不重定向的情况下更改 URL？
【发布时间】：2017-02-16 17:16:29
【问题描述】：

我正在尝试为我网站页面中的每个链接添加国家/地区名称。它正在重定向两次。如何在不重定向的情况下更改 URL？

$(document).on('click',function(e){
    var querystring = '?country=' + countrySelected;
    
    
    if(e.nodeName === "A"){
        window.location = window.location.href + querystring;
    }
});

【问题讨论】：

感谢 Zoltan Toth
我使用了以下它就像一个 cham...if(e.nodeName === "A"){ var newTarget = window.location.href + querystring; }

标签： javascript url

【解决方案1】：

使用井号标签 - #

var querystring = '#country=' + countrySelected;

它在单页应用程序中被大量使用，因为它不重定向。

【讨论】：

您能否在# 字符串上添加解释作为锚点？
除此之外，您（操作员）将需要在每次更改值时替换散列，而且还值得注意的是，服务器端语言无法读取散列。

【解决方案2】：

您可以使用历史 API

https://developer.mozilla.org/en/docs/Web/API/History

history.pushState([data], [title], [url]);

var querystring = 'country=' + countrySelected;

history.pushState("", document.title, querystring);

参考：https://css-tricks.com/using-the-html5-history-api/

【讨论】：

【解决方案3】：

导航到片段

要正确地navigate to fragment，您需要一个目标元素，用您在锚点中引用的id 或name 属性标记。准确地说，点击带有#foo 的链接将滚动带有id="foo" 的元素，否则滚动带有name="foo" 的元素。

注意：建议不要为此使用name 属性。几乎所有浏览器都支持通过 id 属性导航到元素。 也许除了旧的 Netscape 4 (1997)、IE4 (1997) 或更旧的浏览器之外，无法测试这个。在 1995 年的 RFC1866 中已经存在对页面中某个位置的超链接。

找到的元素也将被激活。这意味着您可以使用伪选择器:active 对其应用css。

CSS3 还定义了要应用于目标元素的伪选择器:target。

Browser compatibility for the target pseudo selector:

铬：1+
Android 版 Chrome：51+
适用于 Android 的 UC 浏览器：9.9+
iOS Safari：3.2+
火狐：3.5+
IE：9+
Opera Mini：全部
三星互联网：4+
安卓浏览器：2.1+
Safari：3.2+
边缘：12+
歌剧：10.1+

历史 API

如果导航到片段对您来说不够好，请考虑使用历史 API。我以MDN 为例：

假设 http://example.org/foo.html 执行以下 JavaScript：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

这将导致 URL 栏显示 http://example.org/bar.html，但不会导致浏览器加载 bar.html，甚至不会检查 bar.html 是否存在。

在diveintohtml5.info 和css-tricks.com 了解更多信息。

Browser compatibility for History API:

铬：5+
Android 版 Chrome：51+
适用于 Android 的 UC 浏览器：9.9+
iOS Safari：5.0-5.1+
火狐：4+
IE：10+
Opera Mini：无
三星互联网：4+
Android 浏览器：4.2-4.3+
Safari：6+
边缘：12+
歌剧：11.5+

Dive Into HTML5 建议使用以下方法来检测兼容性：

function supports_history_api() {
  return !!(window.history && history.pushState);
}

这个想法是 window.history 和 history.pushState 不会在不支持 History API 的浏览器中定义。

【讨论】：

请注意HTML5 History API来自IE10（包括）
@timenomad 根据要求添加了兼容性说明。

【解决方案4】：

如果您在不同的国家/地区，网页的功能会有所不同吗？如果是这样，那么它将要求浏览器加载所选国家/地区的页面（因此需要重定向）。如果网页为所选国家/地区做了不同的事情，但它需要另一个参数来实际执行需要在 URL 中添加特定于国家/地区的内容，那么您最好使用以下内容：

var countrystring = '?country=" + countrySelected;
// code to make var querystring = the rest of 
// the requirements for the country to do something
// and your code to verify what the user has entered
addstring = countrystring + querystring;
window.location = window.location.href +addstring;

【讨论】：