当访问者点击按钮时,如何更改页面的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按钮中),如果我window.location.href='http://www.google.com/'从Firebug的控制台执行,则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>?