BOM之location对象

面前的话

  location提供了与当下窗口中加载的文档有关的音讯,还提供了有些导航效能。location是二个很尤其的目的,因为它既是window对象的属性,也是document对象的质量,而且还足以独自使用。本文将详细介绍location对象

//Location {hash: "", search: "", pathname: "/", port: "8080", hostname: "127.0.0.1"…}
console.log(window.location);
//Location {hash: "", search: "", pathname: "/", port: "8080", hostname: "127.0.0.1"…}
console.log(document.location);
//Location {hash: "", search: "", pathname: "/", port: "8080", hostname: "127.0.0.1"…}
console.log(location);

 

属性

  location将URubiconL解析成独立的部分,让开发职员能够经过不一样的性质访问这个部分

图片 1

var URL = 'http://localhost:8080/index.html#text?q=test';
console.log(location.hash);//#text?q=test
console.log(location.host);//localhost:8080
console.log(location.hostname);//localhost
console.log(location.href);//http://localhost:8080/index.html#text?q=test
console.log(location.pathname);///index.html
console.log(location.port);//8080
console.log(location.protocol);//http:
console.log(location.search);''

  如若UENVISIONL中’?’此前有二个’#’,比如’#text?q=test’,那么,location.search获得的就是空字符串”,因为location.search只有取到’?’前面和’#’后面包车型地铁剧情

var URL = 'http://localhost:8080/index.html?q=test#text';
console.log(location.hash);//#text
console.log(location.search);//?q=test

  就算location.search再次来到从问号到U奇骏L末尾的兼具情节,但却绝非艺术每一种访问当中的各样查询字符串参数。为此,创制一个函数,用以分析查询字符串,然后回到包涵全数参数的三个对象:

function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
    var qs = location.search.length > 0  ? location.search.substring(1) : "";
    //保存数据的对象
    var args = {};
    //取得每一项
    var items = qs.length ? qs.split("&") : [];
    var item,name,value;
    var len = items.length;
    //逐个将每一项添加到args对象中
    for(var 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;
}
location.search = "?name=abc&password=123&callback=fn";
console.log(getQueryStringArgs());//[name: "abc", password: "123", callback: "fn"]

 

方法

  使用location对象能够透过广大方法来改变浏览器的任务

【1】assign()

  使用assign()方法并为其传递贰个UGL450L,能够霎时打开新U君越L并在浏览器的历史记录中生成一条记下。假诺是将location.href或window.location设置为四个UCRUISERL值,相当于调用assign()方法。

location.assign("http://baidu.com");
window.location = "http://baidu.com";
document.location = "http://baidu.com";
location.href = "http://baidu.com";//最常用

  每当修改location的属性(hash除外),页面都会以新U凯雷德L重新加载

//修改hash值
location.hash = "#section1";
//修改查询字符串
location.search = "?q=javascript";
//修改主机名
location.hostname = "www.baidu.com"
//修改路径
location.pathname = "mydir"
//修改端口号
location.port = "8080"

【2】replace()

  通过上述任意一种格局修改UPAJEROL后,浏览器的历史记录都会生成一条新记录,因而用户通过单击后退按钮会导航到前3个页面

  而要禁止使用那种行为,能够动用replace()方法,该格局接收多少个参数即要导航到的U奥迪Q3L,结果即便会导致浏览器地方变动,但不会在历史记录中生成新记录,也便是说用户不能够回去前八个页面

  [注意]只有chrome下有效

location.replace("http://baidu.com")

【3】reload()

  reload()方法用于重新加载当前展现的页面。要是调用reload()方法时不传递任何参数,页面会以最得力的法门重新加载。也等于说,假使页面自上次呼吁以来并没有改变过,页面就会从浏览器缓存中再一次加载。假设要强制从服务珍视新加载,则必要传递参数true

  位于reload()调用之后的代码大概会也恐怕不会执行,这要取决于互连网延迟或系统财富等要素,为此,最好将reload()放在代码的末梢一行

//有可能从缓存中加载
location.reload();

//从服务器重新加载
location.reload(true);

   [注意]纯属不要在页面中央直机关接采纳location.reload()方法,此情势会造成页面包车型地铁突出刷新。因为页面刚加载成功,遇到该办法,则再度加载页面,又蒙受该措施,则又加载页面,从而导致页面包车型大巴最好刷新

 

事件

  HTML5骤增了hashchange事件,以便在UCRUISERL的参数列表(及UKoleosL中“#”号前面包车型客车享有字符串)产生变化时通报开发人士。之所以新增那个事件,是因为在Ajax应用中,开发人士常常要使用ULANDL参数列来保存处境或导航音信

  [注意]IE7-浏览器不帮忙haschange事件

  必须要把hashchange事件处理程序添加给window对象,然后U奇骏L参数列表只要转变就会调用它。此时的event对象应当相当包蕴多少个属性:oldUPRADOL和newUCRUISERL。那四个个性分别保存着参数列表变化前后的一体化U奥迪Q5L

  [注意]负有IE浏览器都不接济oldU揽胜L和newU昂CoraL那两个特性

window.onhashchange = function(e){
    e = e || event;
    console.log(e.oldURL,e.newURL);
}

  对于不帮衬那八个属性的IE浏览器,能够由此定期检查location.hash属性来效仿

(function(window) {
  if ( "onhashchange" in window.document.body ) { return; }

  var location = window.location;
  var oldURL = location.href;
  var oldHash = location.hash;

  // 每隔100毫秒检查一下URL的hash
  setInterval(function() {
    var newURL = location.href;
    var newHash = location.hash;

    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);

})(window);

 

相关文章