JavaScript 在按钮单击时加载页面

Posted 2023-02-22

【中文标题】JavaScript 在按钮单击时加载页面

【英文标题】：JavaScript load a page on button click

【发布时间】：2011-04-10 14:45:13

【问题描述】：

我在这里尝试做一个非常简单的任务，我希望能够单击页面上的按钮并让它将我带到另一个页面。我已经尝试过 window.location.href 和其他一些东西，但它什么也没做。我尝试了不同的平台和不同的浏览器，结果都一样。

我知道它可以调用一个函数，但我就是无法加载新页面。这也都在我的本地文件系统中，并且两个页面都位于同一级别（但我也尝试加载外部页面，如 www.apple.com）。

有什么想法吗？

谢谢 帕特里克

【问题讨论】：

你需要比“一堆其他的东西”更具体。发布您的代码（html 和 javascript）并告诉我们您遇到了什么错误。

不是一个好主意：按钮被用户体验为导致动作/触发（回发、保存/加载）的东西。链接（a href）用于导航。不要混合这些。你会让用户感到困惑。

【参考方案1】：

重定向页面的简单代码

<!-- html button designing and calling the event in javascript -->
<input id="btntest" type="button" value="Check" 
       onclick="window.location.href = 'http://www.google.com'" />

【讨论】：

这个有效，但我认为我的问题是我有 type="submit" 而不是 type="button"。感谢您的帮助！

window.location.assign() 在 Firefox 中对我来说效果更好。出于某种原因分配=混乱的历史。

【参考方案2】：

不要滥用表单元素，只要 元素就足够了。

<style>
    /* or put this in your stylesheet */

    .button 
        display: inline-block;
        padding: 3px 5px;
        border: 1px solid #000;
        background: #eee;
    

</style>

<!-- instead of abusing a button or input element -->
<a href="url" class="button">text</a>

【讨论】：

我也想过走这条路。感谢您的帮助。反正我更喜欢这些按钮。再次感谢。

我试过这个按钮，但看起来不太好。它只是一个链接，周围有一条黑线。

【参考方案3】：

只需window.location = "http://wherever.you.wanna.go.com/"，或者，对于本地链接，window.location = "my_relative_link.html"。

您也可以通过在地址栏中输入来尝试，例如javascript: window.location = "http://www.google.com/".

另请注意，URL 的协议部分 (http://) 对于绝对链接不是可选的；省略它将使 javascript 假定一个相对链接。

【讨论】：

感谢您的建议，我不知道您可以在浏览器中运行javascript，每天学习新东西。我正在尝试 window.location 和其他类似的但无法让它工作，我知道它应该。我发现我的“类型”是错误的，所以它与 JavaScript 无关，而与 HTML 无关。再次感谢您的建议。

【参考方案4】：

此处的答案可以在同一浏览器窗口/选项卡中打开页面。

但是，当他们单击按钮时，我希望页面在新窗口/标签中打开。 （选项卡/窗口决定取决于用户的浏览器设置）

以下是在新标签/窗口中打开页面的工作原理：

<button type="button" onclick="window.open('http://www.example.com/', '_blank');">View Example Page</button>

它不一定是一个按钮，你可以在任何地方使用。 注意用于在新标签/窗口中打开的 _blank。