【前端丨学习笔记】js实现页面跳转的几种方法

Amy · 发表于 2019-1-8 17:13:56

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

第一种：直接跳转
有参数：

[JavaScript] 纯文本查看 复制代码

<script language="javascript" type="text/javascript">
           window.location.href="login.jsp?backurl="+window.location.href; 
</script>

直接跳转无参数时：

[JavaScript] 纯文本查看 复制代码

<script>window.location.href='http://www.baidu.com';</script>

第二种：返回上一个界面

[JavaScript] 纯文本查看 复制代码

<script language="javascript">
alert("返回");
window.history.back(-1);
</script>

标准嵌套

[HTML] 纯文本查看 复制代码

<a href="javascript:history.go(-1)">返回上一步</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>

第三种：指定跳转页面对框架无效

[JavaScript] 纯文本查看 复制代码

<script language="javascript">
       window.navigate("top.jsp");
  </script>

第四种：指定自身跳转页面对框架无效

[JavaScript] 纯文本查看 复制代码

<script language="JavaScript">
          self.location='top.htm';
   </script>

第五种：指定自身跳转页面对框架有效

[JavaScript] 纯文本查看 复制代码

<script language="javascript">
          alert("非法访问！");
          top.location='xx.aspx';
   </script>

第六种：按钮式在button按钮添加事件跳转

[JavaScript] 纯文本查看 复制代码

<input name="pclog" type="button" value="GO">

第七种：在新窗口打开

[JavaScript] 纯文本查看 复制代码

<a href="javascript:">开新窗口</a>

Amy · 发表于 2019-1-8 17:21:10

示例：
<head>
<script language="javascript">

function old_page()
{
window.location = "login.aspx"
}
function replace()
{
window.location.replace("login.aspx")
}
function new_page()
{
window.open("login.aspx")
}
</script>
</head>
<body>
<input type="button" onclick="new_page()" value="在新窗口打开s"/>
<input type="button" onclick="old_page()" value="跳转后有后退功能"/>
<input type="button" onclick="replace()" value="跳转后没有后退功能"/>
</body>

站长苏飞 · 发表于 2019-1-8 18:02:15

我只是路过打酱油的。

范范 · 发表于 2019-1-8 21:05:30

强烈支持楼主ing……

站长苏飞 · 发表于 2019-1-9 10:28:47

我只是路过打酱油的。

惜 · 发表于 2019-1-9 10:56:26

我只是路过打酱油的。

竹林风 · 发表于 2019-1-9 17:02:09

我只是路过打酱油的。

liu · 发表于 2019-1-11 15:17:44

强烈支持楼主ing……

		自动登录	找回密码
密码			马上注册

[零基础学习web前端] 【前端丨学习笔记】js实现页面跳转的几种方法

相关帖子