我们如何在不重新加载页面的情况下使用 javascript/jQuery 更新 URL 或查询字符串?

Posted

技术标签:

【中文标题】我们如何在不重新加载页面的情况下使用 javascript/jQuery 更新 URL 或查询字符串?【英文标题】:How do we update URL or query strings using javascript/jQuery without reloading the page? 【发布时间】:2012-09-12 13:25:55 【问题描述】:

有没有办法在不重新加载页面的情况下以编程方式更新 URL?

编辑:我在帖子的标题中添加了一些内容。我只是想明确表示我不想重新加载页面

【问题讨论】:

举个例子说明你想要达到的目标。 您要更改可见 URL(在地址栏中)还是 DOM 中的文档 URL 字符串? @Maurice 我只想更改可见 URL 使用 window.history.replaceState( ) 如this example 【参考方案1】:

是和不是。所有常见的网络浏览器都有防止这种情况的安全措施。目标是防止人们创建网站副本,更改 URL 以使其看起来正确,然后能够欺骗人们并获取他们的信息。

然而,一些 html5 兼容的网络浏览器已经实现了一个历史 API,可以用于类似你想要的东西:

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

我测试过,效果很好。它不会重新加载页面,但它只允许您更改 URL 查询。您将无法更改协议或主机值。

更多信息:

http://diveintohtml5.info/history.html

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

【讨论】:

点击“返回”将删除更改,但我喜欢这个想法。 此方法在某些浏览器中不起作用,因为window.location.pathname 包含斜杠/,结果值可能是http://my.domain.com/?myNewUrlQuery=1 而不是http://my.domain.com?myNewUrlQuery=1【参考方案2】:

是的 - document.location = "http://my.new.url.com"

您也可以使用相同的方式检索它,例如。

var myURL = document.location;
document.location = myURL + "?a=parameter";

位置对象也有许多有用的属性:

hash            Returns the anchor portion of a URL
host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

编辑: 设置 document.location 的哈希值不应重新加载页面,只需更改页面上焦点所在的位置。所以更新到#myId 将滚动到带有id="myId" 的元素。如果id 不存在,我相信什么都不会发生? (需要在各种浏览器上确认)

EDIT2:为了清楚起见,不仅仅是在评论中: 您不能在不更改页面的情况下使用 javascript 更新整个 URL,这是一个安全限制。否则,您可以单击指向随机页面的链接,该页面看起来像 gmail,然后立即将 URL 更改为 www.gmail.com 并窃取人们的登录详细信息。 您可以在某些浏览器上更改域之后的部分以处理 AJAX 样式的事情,但这已经被 Osiris 链接到。更重要的是,即使可以,您也可能不应该这样做。 URL 告诉用户他/她在您的网站上的位置。如果你改变它而不改变页面内容,它会变得有点混乱。

【讨论】:

我正在考虑更新所有的 url,而不仅仅是哈希 你不能在不改变页面的情况下用javascript更新整个URL,这是一个安全限制。否则,您可以单击指向随机页面的链接,然后立即将 URL 显示为 www.gmail.com 并窃取人们的登录信息。 设置document.location 重新加载页面。 感谢@AlainTiemblo - 如果您阅读了完整的答案,您会看到我承认这一点,但我已经说明了一些警告。 好深入的解释。【参考方案3】:

你可以使用:

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)

【讨论】:

或 window.history.replaceState('obj', 'newtitle', newUrlWithQueryString) 如果您不想将 url 更改保存在历史记录中。【参考方案4】:

使用

window.history.replaceState(, document.title, updatedUri);

更新网址不重新加载页面

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) 
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState(, document.title, updatedUri);
 

删除查询字符串不重新加载页面

var url = window.location.href;
if (url.indexOf("?") > 0) 
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState(, document.title, updatedUri);

【讨论】:

我只是在看Mozilla's documentation for window.history.replaceState() 我不确定这三个参数的作用,你能解释一下吗?第二个,特别是document.title 似乎什么也没做。 replaceState() 的操作方式与pushState() 完全相同,因此请查看parameters for the pushState() method 的描述。 title 参数暂时被忽略,但他们将来可能会使用它。【参考方案5】:

定义一个新的 URL 对象,为其分配当前 url,将参数附加到该 URL 对象,最后将其推送到浏览器状态。

var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);

【讨论】:

【参考方案6】:

是的

document.location 是正常的方式。

但是 document.location 实际上与 window.location 相同,除了 window.location 在旧版浏览器中受更多支持,因此可能是首选。

查看 SO 上的此线程以获取更多信息:

What's the difference between window.location and document.location in JavaScript?

【讨论】:

【参考方案7】:

使用主题标签为 URL 更改添加前缀以避免重定向。

这个重定向

location.href += '&test='true';

这不会重定向

location.href += '#&test='true';

【讨论】:

【参考方案8】:

纯 javascript:document.location = 'http://www.google.com';

这将导致浏览器刷新 - 如果您需要更新 URL 以实现某种浏览历史记录而不重新加载页面,请考虑使用哈希。如果是这种情况,您可能需要查看 jQuery.hashchange。

【讨论】:

是的,它会导致浏览器刷新。正在寻找不会重新加载的东西。 应该可以不刷新页面,但据我所知,它仅在较新的浏览器中受支持。您应该改为更改哈希 url。【参考方案9】:

您需要更加具体。 “更新网址”是什么意思?这可能意味着自动导航到不同的页面,这当然是可能的。

如果您只想更新地址栏的内容而不重新加载页面,请参阅Modify the URL without reloading the page

【讨论】:

感谢您的链接!我在看答案【参考方案10】:

是 - document.location.hash 用于查询

【讨论】:

它重新加载页面。我正在寻找不删除页面的解决方案。 是的,它会重新加载页面。您需要将其与 ajax 结合使用才能获取新页面并插入其内容。 提问者不想重新加载页面。

以上是关于我们如何在不重新加载页面的情况下使用 javascript/jQuery 更新 URL 或查询字符串?的主要内容,如果未能解决你的问题,请参考以下文章

如何在不重新加载整个页面的情况下刷新 div?

如何在不重新加载页面的情况下重新启动 Angular 应用程序?

如何在不重新加载页面的情况下更改页面 url

如何在不刷新整个页面的情况下重新加载组件?

如何在不重新加载页面的情况下提交表单[重复]

如何在不刷新页面的情况下在 ReactJS 中重新加载?