BOM之location对象

定义

  location提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。location是一个很特别的对象,因为它既是window对象的属性,也是document对象的属性。换句话说,window.location和document.location引用的是同一个对象。

console.log(window.location)
console.log(document.location)

查询字符串参数

  location将URL解析成独立的片段,让开发人员可以通过不同的属性访问这些片段

  尽管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,但不会在历史记录中生成新记录,也就是说用户不能回到前一个页面

    [注意]只有IE下有效

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

  【3】reload()

    重新加载当前显示的页面。位于reload()调用之后的代码可能会也可能不会执行,这要取决于网络延迟或系统资源等因素,为些,最好将reload()放在代码的最后一行。

      [a]若不传递任何参数,页面会以最有效的方式重新加载。也就是说,如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。

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

      [b]如果要强制从服务器重新加载,则需要传递参数true

//从服务器重新加载
location.reload(true);
时间: 2024-11-06 06:30:19

BOM之location对象的相关文章

location对象[第8章-浏览器对象模型BOM 笔记2]

location 是最有用的 BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.事实上, location 对象是很特别的一个对象,因为它既是 window 对象的属性,也是document 对象的属性:换句话说, window.location 和 document.location 引用的是同一个对象.location 对象的用处不只表现在它保存着当前文档的信息,还表现在它将 URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段.下表列出了 loc

【JavaScript】BOM对象——Window对象&amp;History对象&amp;Location 对象

1.Window对象: 表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInterval 使用. setTimeout():它有一个返回值,主要是提供给 clearTimeout 使用. clearInterval():该方法只能清除由 setInterval 设置的定时操作. clearTimeout():该方法只能清除由 setTimeout 设置的定时操作. 代码: <script> // //确认弹出框 // confirm("确定

javascript之BOM对象(二location对象)

一.location对象提供和当前加载的文档相关的信息还有一些导航功能.location对象是window对象的属性,同时也是document对象的属性.window.location和document.location指向同一个对象. location对象不仅保存着当前文档的信息,还可以将URL解析为独立的字段,可以通过不同的属性访问这些片段. location的所有属性如下 属性名 例子 说明 hash #contents 返回URL中的hash(#号后跟0个或多个字符) host loca

细看JS中的BOM、DOM对象

DOM对象模型 [DOM树节点] DOM节点分为三大类:元素节点,文本节点,属性节点: 文本节点,属性节点为元素节点的两个子节点: 通过getElment系列方法,可以去到元素节点: [查看节点] 1.getElementById:通过id获取唯一的节点:多个同名ID只会取到第一个: 2.etElementByName:通过name取到一个数组,包含1到多个节点: 使用方式:通过循环取到每个节点,循环次数,从0开始<数组.length [查看设置属性节点] 1.查看属性节点:getAttribu

location对象及history对象

 history对象 location 是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.事实上,location 对象是很特别的一个对象,因为它既是window 对象的属性,也是document 对象的属性:换句话说,window.location 和document.location 引用的是同一个对象. 一.所有属性: hash "#contents" 返回URL中的hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串

关于location对象

location对象其实就是window.location,其中顶级对象window可以省略 主要的属性 location.host 主机 location.hostname 主机名 location.port 端口 location.protocol 协议 location.pathname 路径名 location.search 获取地址中从?开始的参数 location.href 路径的地址 location.hash 锚点值(从#开始) 关于顶级对象window js三大组成分别是ECM

JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象)

JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象) 一丶什么是BOM ???????Bom:Browser Object Model,浏览器对象模型.操作浏览器部分的功能的API(事件/函数). 结构图: ???分析:1.window对象是Bom的顶层对象.所有的对象都是从windom延伸出来的,称其为window子对象. ?????? 2.dom是bom的一部分 ?????? 3.

百万年薪python之路 -- JS的BOM与DOM对象

BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面 定时器 1. setTimeOut() 一段时间之后执行某个内容,执行一次 示例 var a = setTimeout(function f1(){confirm("are you ok?");},3000); var a = setTimeout("co

js基础和js操作bom和dom对象

流程控制 if判断 if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容 console.log('1111'); } else{ console.log('222'); } 多条件判断 var a = 0; if(a > 1){ // console.log('1111'); // var hhhh = document.getElementById('d1'); // hhhh.innerText = '彭于晏'; }else if(a<1){ con