美文网首页
JavaScript(BOM)之location对象

JavaScript(BOM)之location对象

作者: 择夕_ | 来源:发表于2018-05-15 12:36 被阅读0次

location对象

location提供了当前窗口中加载的文档有关的信息。location即是window对象的属性,又是documet对象的属性。所以window.location和document.location引用的是同一个对象。
location对象的所有属性

属性名 例子 说明
hash "#contents" 返回URL中的hash(如果URL不包含散列,则返回为空字符串)
host "www.wrox.com:80" 返回服务器名称和端口
hostname "www.wrox.com" 返回服务器名称
herf "http://www.wrox.com" 返回当前页面完整的URL
pathname "/WileyCDA" 返回url中的目录和文件名
port "8080" 返回端口
protocol "http:" 返回页面使用协议(http、https)
search "?q=javascript" 返回url查询字符串。以问号开头
1.查询字符串参数

简单说location.search返回从问号到URL末尾的所有内容,但是并没有对参数进行逐个拆分。为此,可以尝试下面的demo拆分参数。

function getKeyAndValue() {
    var qs = (location.search.length > 0 ? loction.search.substring(1) : "");
    //
    var args = {};
    //
    var items = qs.length ? qs.split("&") : [];
    var item = null;
    var name = null;
    var value = null;
    
    for (var i = 0; i < items.length; i ++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length){
            args[name] = value;
        }
    }
    
    return args;
}

上面这个方法非常简单,大家应该也都写过,所以不讲解了。

2.访问位置操作

其实通过location对象可以改变浏览器的访问位置。例如:

location.assign("https://www.baidu.com")
//上面的方法,也可以这样写
windwo.location = "https://www.baidu.com"
location.herg = "https://www.baidu.com"

除了上述操作外,也可以使用hash、search、hostname、pathname、port属性设置新值改变URL

//初始URL为https://www.baidu.com

//将URL改成"https://www.baidu.com/#section1"
location.hash = "#section1"

//将URL改成"https://www.baidu.com/?q=javascript"
location.search = "?q=javascript";

//将URL改成"https://www.yahoo.com"
location.hostname = "www.yahoo.com";

//将URL改成"https://www.baidu.com/mydir、"
location.pathname = "mydir";

//将URL改成"https://www.baidu.com:8080/"
location.port = 8080

每次修改location属性(hash除外),页面都会重新加载。
当以上面任何方式修改URL后,都会在浏览器生成一条历史记录。因此用户点击“后退”,会返回到前一个页面。如果想要禁止用户返回的话,可以使用replace()方法。这个方法值接受一个参数url。该方法不会在历史记录中生成数据。

// setTimeout主要是用于延时执行方法
setTimeout( function(){
    location.replace("https://www.baidu.com");
} 1000);

还有一个比较常用的方法reload(),可以重新加载当前页面。如果调用reload()时不传递任何参数,页面会以最有效的方式重新加载。如果想要强制加载需要传入true。

location.reload();
location.reload(true);

注:因为reload调用后的代码可能不会立刻被执行,所以最好将reload()放在代码最后一行

相关文章

  • JavaScript(BOM)之location对象

    location对象 location提供了当前窗口中加载的文档有关的信息。location即是window对象的...

  • 【javascript】BOM——location对象

    location 对象 location 提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。 wind...

  • BOM对象

    BOM常用对象 1.BOM的常用对象: window navigator history location...

  • BOM

    BOM(浏览器对象模型),BOM提供了很多对象,用于访问浏览器的功能. location location提供了与...

  • 第二周总结

    window对象 BOM BOM:window对象下面包含5个属性,navigator、location、docu...

  • 前端面试04:说说几个很实用的 BOM 属性对象方法?

    什么是 Bom? Bom 是浏览器对象。有哪些常用的 Bom 属性呢? (1)location 对象 locati...

  • BOM对象(一)———window对象

    bom对象分为:window对象,Navigator对象,Screen对象,History对象,Location对...

  • 浅谈javascript的BOM操作

    BOM操作 1,地址 location, location它既是window的对象属性也是document对象的属...

  • 【BOM】location对象

    BOM:浏览器对象模型 1、location是最有用的BOM对象之一。2、用途:提供了与当前窗口中加载的文档有关的...

  • BOM location对象

    window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属...

网友评论

      本文标题:JavaScript(BOM)之location对象

      本文链接:https://www.haomeiwen.com/subject/ytitdftx.html