当访问者单击按钮时，如何更改页面的 URL？

Question

当访问者单击按钮元素时，如何更改 URL？

示例：

<form id="search">
  <input type="text" />
  <button onclick="javascript:alert('hi');">Alert Hi</button>
  <button onclick="javascript:window.location.href='http://www.google.com/'">Go to Google</button>
</form>

（或参见 JSFiddle。）

对于快速演示页面，我只需要在访问者单击按钮时将其发送到新的 URL。 我可以执行 JavaScript onclick（在 Alert Hi 按钮中），如果我从 Firebug 的控制台执行

window.location.href='http://www.google.com/'

，则 URL 会发生变化。 我需要做什么才能在单击按钮时更改 URL？

Answer 1

问题是当您单击按钮时正在提交表单。添加

type="button"

这样就不会提交表单。您也不需要

javascript

属性中的

onclick

。请参阅如何防止按钮提交表单

示例 http://jsfiddle.net/E7UEe/1/ 请注意，它不会转到 google.com，因为 jsfiddle 不允许它。请注意错误消息

Refused to display document because display forbidden by X-Frame-Options.

<form id="search">
  <input type="text" />
  <button onclick="javascript:alert('hi');">Alert Hi</button>
  <button type="button" onclick="window.location.href='http://www.google.com/'">Go to Google</button>
</form>​

无需 JS 即可使用的替代方案是

appearance:button

CSS 指令 http://jsfiddle.net/d6gWA/

<a class="btn"> Link looking like button</a>​
.btn {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    -ms-appearance: button;
}​

或者您可以随时将按钮放在链接中http://jsfiddle.net/d6gWA/2/

<a class="btn" href="http://www.google.com" target="_blank"><button type="button">Link Button</button></a>​

Answer 2

您还可以让表单在提交时更改链接，这可用于按钮或其他各种方法。以防万一其他人在看这篇文章时对如何使其他表单属性提交表单感到困惑。在这种情况下，它看起来像

<form id="search" action="http://www.google.com/">
  <input type="text" />
  <button>Go to Google</button>
</form>

此按钮提交表单，使用表单操作字段更改 URL。这可以应用于任何不同类型的表单项，只要它提交表单即可。

Answer 3

 <button onclick="javascript:window.location='http://www.google.com/'">Go to Google</button>

只要删除你的 .href 就可以了