zoukankan      html  css  js  c++  java
  • 页面的跳转

    如果想模拟点击一个链接,使用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() eplaceState()方法不触发。
    window.onhashchange:当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发。触发的情况如下:
    a、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分;
    b、使用不同history操作方法到带hash的页面;
    c、点击链接跳转到锚点。
    参考: https://blog.csdn.net/dearbaba_8520/article/details/80335131

  • 相关阅读:
    面向对象的设计模式2
    数据结构
    算法题目1
    5.7(1) 反射
    hashMap原理(java8)
    6.1 接口
    18.1 线程
    13.2 具体的集合
    scrapy(2)——scrapy爬取新浪微博(单机版)
    5.1 类、超类和子类
  • 原文地址:https://www.cnblogs.com/cherishnow/p/11193157.html
Copyright © 2011-2022 走看看