5

当访问者单击按钮元素时，如何更改 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？

4

2 回答 2

17

问题是当您单击按钮时正在提交表单。添加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>​
于 2012-11-16T23:25:39.397 回答
-1 
 <button onclick="javascript:window.location='http://www.google.com/'">Go to Google</button>

只需删除您的 .href 即可

于 2012-11-16T23:20:38.397 回答