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将URL解析成单身的组成部分,让开发人员可以经不同之习性访问这些片段

图片 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);''

  如果URL中’?’之前起一个’#’,比如’#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返回从问号到URL末尾的富有内容,但也尚无法逐个看中的每个查询字符串参数。为夫,创建一个函数,用以分析查询字符串,然后回来包含有参数的一个对象:

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()方法并为那个传递一个URL,可以就打开新URL并在浏览器的历史记录中生成一久记下。如果是将location.href或window.location设置为一个URL值,相当给调用assign()方法。

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

  每当修改location的习性(hash除外),页面还见面以新URL重新加载

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

【2】replace()

  通过上述任意一种植办法修改URL后,浏览器的历史记录都见面要命成一长新记录,因此用户通过单击后回落按钮会导航及前一个页面

  而使禁用这种作为,可以下replace()方法,该办法接收一个参数就如导航及之URL,结果则会促成浏览器位置变动,但不见面在历史记录中生成新记录,也就是说用户不能够返回前一个页面

  [注意]只有chrome下有效

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

【3】reload()

  reload()方法用于更加载当前显示的页面。如果调用reload()方法时未传递任何参数,页面会以最好可行的方还加载。也就是说,如果页面自上次恳求以来并没改动了,页面就会由浏览器缓存中还加载。如果一旦强制从服务器又加载,则用传递参数true

  位于reload()调用之后的代码可能会见为或未会见尽,这如果在于网络延迟或系统资源等要素,为是,最好以reload()放在代码的结尾一行

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

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

   [注意]绝对不要当页面中直接采用location.reload()方法,此道会导致页面的最刷新。因为页面刚加载成功,遇到该措施,则还加载页面,又碰到该方法,则又加载页面,从而导致页面的极其刷新

 

事件

  HTML5激增了hashchange事件,以便在URL的参数列表(及URL中“#”号后的拥有字符串)发生变化时通开发人员。之所以新增这个波,是为在Ajax应用被,开发人员经常要动URL参数列来保存状态或导航信息

  [注意]IE7-浏览器不支持haschange事件

  必须要把hashchange事件处理程序上加为window对象,然后URL参数列表只要别便会调用它。此时的event对象应当格外包含两独属性:oldURL和newURL。这简单单特性分别保存着参数列表变化前后的完好URL

  [注意]具有IE浏览器还不支持oldURL和newURL这简单只特性

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);

 

相关文章