页面的跳转

Posted 2022-04-18 cherishnow

如果想模拟点击一个链接，使用location.href。
如果想模拟HTTP重定向，使用replace。

window.location.replace("http://baidu.com");
window.location.href = "http://baidu.com";
window.location.assign(url): 加载 URL 指定的新的 html 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
window.location.replace(url): 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

onclick跳转

设置window的location.href属性

onclick="window.location.href='URL'"
window.location = "newurl"或 window.location.href = "url";

调用window的open方法

onclick="window.open('URL','_blank');" // 在新窗口打开
onclick="window.open('URL','_self');" // 覆盖当前页

a标签跳转

<a href="url" target="_blank">Preface</a> // 在新窗口打开
<a href="url" target="_self">Preface</a> // 覆盖当前页，target属性默认为_self，此处可省略

使用html 的meta 标签实现页面的跳转

(比较常使用在：新旧系统升级的状况下， 暂时保留旧系统，通过域名进入时自动转到新系统中)
<meta http-equiv="refresh" content="10; URL=https://www.cnblogs.com">//10s以后跳转（meta刷新） <meta http-equiv="location" content="URL=http://evil.com" />（元的位置）

使用 window.navigate

window.navigate("url");
(window.navigate 与 window.location.href 的使用区别：window.navigate("url") 这个方法是只针对IE的，不适用于火狐等其他浏览器。所以基本上可以遗忘。location适用于所有浏览器的。)
当出现乱码时，可使用以下函数转换编码：

<script language="javascript" type="text/javascript">
 function code(url)
     var code = encodeURI(url);    
     //code=encodeURI(code); //如果不行再加上这句
    alert(code);
 
 code("test.jsp?id=张三");
 </script>

jq中的重定向

var url='www.your_url.com';
$(location).attr('href',url);
//或
$(location).prop('href',url);

window.history

window.history是用来保存用户在一个会话期间的网站访问记录，并提供相应的方法进行追溯。其对应的成员如下：
方法：back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)
属性：length、state
事件：window.onpopstate
方法说明：
back()：回退到上一个访问记录; 在历史记录中后退：window.history.back();
forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward();
go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1); 向前移动一页window.history.go(1);
查看历史记录栈中一共有多少个记录点：window.history.length;
pushState(stateData, title, url)：在history中创建一个新的访问记录，不能跨域，且不造成页面刷新;
replaceState(stateData, title, url)：修改当前的访问记录，不能跨域，且不造成页面刷新;
另，HTML5新增了可以监听history和hash访问变化的全局方法：
window.onpopstate：当调用history.go()、history.back()、history.forward()时触发;pushState()\\replaceState()方法不触发。
window.onhashchange：当前 URL 的锚部分(以 ‘#‘ 号为开始) 发生改变时触发。触发的情况如下：
a、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分;
b、使用不同history操作方法到带hash的页面;
c、点击链接跳转到锚点。
参考： https://blog.csdn.net/dearbaba_8520/article/details/80335131