苏飞论坛

标题: 【前端丨学习笔记】js实现页面跳转的几种方法 [打印本页]

作者: Amy 时间: 2019-1-8 17:13
标题: 【前端丨学习笔记】js实现页面跳转的几种方法

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

【零基础学习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
示例：
<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
我只是路过打酱油的。

作者: 范范 时间: 2019-1-8 21:05
强烈支持楼主ing……

作者: 站长苏飞 时间: 2019-1-9 10:28
我只是路过打酱油的。

作者: 惜 时间: 2019-1-9 10:56
我只是路过打酱油的。

作者: 竹林风 时间: 2019-1-9 17:02
我只是路过打酱油的。

作者: liu 时间: 2019-1-11 15:17
强烈支持楼主ing……

欢迎光临苏飞论坛 (http://www.sufeinet.com/)