当访客点击按钮时，我该如何更改页面的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？

- KatieK

---

你的按钮提交表单。另外，由于你有一个 fiddle，你应该知道 Google 不会在框架中加载，因为 X-frame-options。 - Musa

那么仅仅使用锚标签就不够了吗？ - Shmiddty

@Shmiddty - 我知道！在这种情况下，按钮的样式很好，但页面只完成了一半，因为我正在等待利益相关者提供一些规格，所以我们正在伪造它。 - KatieK

@KatieK，请查看关于使其无需JS运行的最新更新，我的答案。 - Ruan Mendes

@KatieK 我很喜欢你网页上关于Windows快捷键的提示，我之前不知道还有shift+右键可以打开额外选项。 - Ruan Mendes

@JuanMendes 很酷，很高兴听到它对您有帮助。顺便说一下，我在 http://www.pewpewlaser.com/pplb.rss 上有一个 RSS 订阅源。 - KatieK

Answer 1

问题在于点击按钮时表单被提交了。添加type="button"以防止表单提交。您还不需要在onclick属性中使用javascript。请参见如何防止按钮提交表单 示例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>​

- Ruan Mendes

---

一个按钮是否被认为是提交按钮？ - KatieK

没有指定type属性的按钮元素和type属性被设置为"submit"的按钮元素代表相同的事情。 - Ruan Mendes

Answer 2

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

只需删除您的 .href，它就应该可以工作了。

- Louis Loudog Trottier