JavaScript单击按钮加载页面

68

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

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

有什么想法吗？

谢谢帕特里克

javascript button load

— 帕特里克
source

您需要比“一堆其他事情”更具体。发布您的代码（HTML和JavaScript），并告诉我们您遇到了什么错误。

— 马修·弗拉申

这不是一个好主意：用户将按钮体验为导致操作/触发（回发，保存/加载）的操作。强制使用链接（a href）进行导航。不要混合使用。您会迷惑用户。

— 卡斯珀·克莱恩

97

简单的代码即可重定向页面

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

— 普兰尼·拉娜（Pranay Rana）
source

1

这行得通，但是我认为我的问题是我输入的是type =“ submit”而不是type =“ button”。谢谢您的帮助！

— 帕特里克

1

window.location.assign()在Firefox中对我来说效果更好。由于某种原因，作业=弄乱了历史。

— akostadinov

22

不要滥用<a>元素足以满足要求的表单元素。

<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>

— 格里森
source

1

我也在考虑采用这种方式。感谢您的帮助。我还是更喜欢这些按钮。再次感谢。

— 帕特里克

我尝试了此按钮，但它看起来并不好。它只是一个带有黑线的链接。

— RedDragonWebDesign 2016年

19

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

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

另外请注意，URL（http://）的协议部分对于绝对链接不是可选的；省略它会使javascript成为相对链接。

— 炸弹
source

感谢您的建议，我不知道您可以在浏览器中运行javascript，每天学习新知识。我正在尝试window.location和其他类似的应用程序，但无法使其正常工作，我知道应该这样做。我发现我的“类型”是错误的，因此它与JavaScript无关，与HTML无关。再次感谢你的建议。

— 帕特里克

4

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

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

因此，这是在新标签页/窗口中打开页面的工作方式：

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

它不必是按钮，您可以在任何地方使用。注意用于在新选项卡/窗口中打开的_blank。

— 塔里克
source