• location对象


    location对象比我们想象的是要强大的,我们可以直接通过 location.href、 location.hash、 location.search等等就可以直接改变Location , 而不是返回什么,而是直接改变,所以使用location.hash等还是非常方便的。   

        location对象提供了与当前窗口中加载的文档的有关信息,还提供了一些导航功能,location对象既是window对象的属性,也是document对象的属性。 下面是location对象具有的所有属性:

    • hash 返回URL中的hash(#号后的零或者多个字符)。
    • host 返回服务器名称和端口号(如果有的话)
    • hostname 返回不带端口号的服务器名称
    • href 返回当前加载页面的完整的url。
    • toString 返回和href属性的一样。
    • pathname 返回url中的目录或文件名
    • port 返回url中指定的端口号。 
    • protocol 返回页面使用的协议,通常是http:或https:
    • search 返回url的查询字符串,这个字符串以问号开头。

      

    1. 使用查询字符串参数

    function getQueryStringArgs() {
          var qs = (location.search.length > 0 ? location.search.substring(1) : ""), // 获取查询字符串
              args = {}, // 存储数据的对象
              items = qs.length ? qs.split("&") : [], // 得到键值对组成的数组
              item = null, // 用户遍历每一个键值对
              name = null, // 每一个键值对中的key
              value = null, // 每一个键值对中的value
    
              // 在for循环中使用
              i = 0,
              len = items.length;
              for (i = 0; i < len; i++) {
                item = items[i].split("=");
                name = decodeURIComponent(item[0]);
                value = decodeURIComponent(item[1]);
                if (name.length) {
                    args[name] = value;
                }
    
              }
            return args;
        }

    2. 位置操作

      使用location对象可以通过很多方式改变浏览器的位置,assign方法是比较常用的。

    location.assign('http://www.cnblogs.com');

      他和下面的几种方法也是等价的:

    location.href = "http://www.cnbolgs.com";
    window.location = "http://www.cnblogs.com";
    location = "http://www.cnblogs.com";

      另外,修改location对象的其他属性也可以改变当前加载的页面。 

    // 当前url: https://cn.vuejs.org/v2/api/#选项-数据
    location.hash = "#props"; // 执行之后,浏览器中的location就会发生改变。

      当然,location.search、location.hostname、location.pathname、location.port都是可以直接改变的。

      注意: 每次修改location的属性(hash除外),页面都会以新url重新加载。 还可以看到,和字符串不同,修改字符串,本身是不可变的,而location发生了变化。

    3.  replace方法

      我们之前的方法都会在浏览器的历史记录中添加一条历史记录,修改hash值也会添加一个新纪录。 并且可以通过回退按钮回退到上一个页面。

      举例来说: 从A到B到C,只要修改url, 那么在历史记录中就会添加一条新的历史记录, 那么在C页面进行回退的时候就会回退到B页面,在B页面回退的时候就会回退到A页面。

      但是:如果我们使用replace方法,情况就不一样了,这个方法接受一个url作为参数,即要导航到的URL,结果虽然会导致浏览器位置改变,但是不会在历史记录中生成新的记录,而是替换了之前的记录。 当前历史信息如下:

      如果我这时使用 location.href = "https://cn.vuejs.org/v2/api/#props"; 那么就会插入一条新的记录,如下:

       

      并且我们点击回退按钮也可以回退到之前的 #errorHandler 页面。 

      但是如果使用在#errorHandler页面的使用使用location.replace("https://cn.vuejs.org/v2/api/#props"), 那么这个props的历史记录机会替代errorHandler的历史记录, 这样,在点击回退的时候只能回退到 optionMergeStrategies页面,而不能再会退到 errorHandler页面了。

      

    4. reload() 方法

      这个方法的作用是从新加载当前的页面, 如果调用reload()时不传递任何参数,页面就会以最有效的方式重新加载,也就是说,如果页面自上次请求以来没有改变过,那么页面就会从浏览器的缓存中加载。如果要强制从服务器重新加载,那么可以像下面这样为该方法传递参数true。

    location.reload(); // 重新加载(有可能从缓存中加载)
    location.reload(true); // 重新加载(从服务器端加载)

    注意: 位于reload调用之后的代码可能会执行也可能不会,这要取决于网络延迟或系统因素等。 为此,最好把reload()放在代码的最后一行。

      

  • 相关阅读:
    VUE框架的插值操作补充
    VUE框架
    VUE框架vif
    VUE框架 methods使用
    JS 计时器案例
    JS 函数
    VUE框架安装
    VUE框架的插值操作
    JS Date类型
    VUE框架的使用
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/7031069.html
Copyright © 2020-2023  润新知