JavaScript实现按钮点击跳转页面的几种方法

JavaScript按钮点击跳转页面实现方法

在网站制作过程中，有时需要实现点击按钮后跳转到另一个页面的效果，特别是当按钮以图片形式呈现时，用户点击图片应能导航至目标页面。

可以通过设置 onclick 属性为 window.location='新页面' 来实现这一功能。

当前窗口与新窗口跳转代码

第一种情况是在当前窗口中直接进行页面跳转。

具体实现代码如下：

window.location.href="你所要跳转的页面";

第二种情况是在新窗口中打开目标页面。

具体实现代码如下：

window.open('你所要跳转的页面');

此外，还可以使用 window.history.back(-1) 返回上一页。

具体实现代码如下：

<input type="submit" name="Submit" value="同意" onclick=window.open(https://www.jb51.net/)>

包含输入验证的跳转逻辑

如果需要在点击按钮提交时验证输入框内容，例如当用户名为空时阻止跳转，可以通过以下方法实现。

具体实现代码如下：

<input type="submit" name="submit" onclick="open()">
<script language=javascript>
fuction open(){
if(!document.form_name.username.value) {
alert("请输入用户名！"); document.form_name.username.focus(); return false;
}else document.form_name.action="aaa.htm";
}
</script>

通过上述代码，当输入为空时，点击按钮将不会跳转到其他页面，从而实现了验证效果。

JS跳转页面参考代码汇总

以下是JS跳转页面的参考代码示例。

具体实现代码如下：

第一种： <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种： <script language="javascript"> alert("返回"); window.history.back(-1); </script> 第三种： <script language="javascript"> window.navigate("top.jsp"); </script> 第四种： <script language="JavaScript"> self.location='top.htm'; </script> 第五种： <script language="javascript"> alert("非法访问！"); top.location='xx.jsp'; </script>

弹出框确认后跳转示例

以下是javascript中弹出选择框跳转到其他页面的示例。

<script language="javascript">
<!--
function logout()...{
if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{
window.location.href="logout.asp?act=logout"
}
}
-->
</script>

以下是javascript中弹出提示框跳转到其他页面的示例。

<script language="javascript">
<!--
function logout()...{
alert("你确定要注销身份吗？");
window.location.href="logout.asp?act=logout"
}
-->
</script>