Cherish_Now

导航

页面的跳转

如果想模拟点击一个链接,使用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

posted on 2019-07-16 10:10  Cherish_Now  阅读(189)  评论(0编辑  收藏  举报