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

查询字符串参数

function getQueryStringArgs(){

//取得查询字符串并去掉开头的问号

var qs = (location.search.length > 0 ? location.search.substring(1) : ""),

//保存数据的对象

args = {},

//取得每一项

items = qs.length ? qs.split("&") : [],

item = null,

name = null,

value = null,

//在 for 循环中使用

i = 0,

len = items.length;

//逐个将每一项添加到 args 对象中

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;

}

最后将 name 作为 args 对象的属性,将 value 作为相应属性的值(使用 decodeURIComponent() 分别解码 name 和 value,因为查询字符串应该是被编码过的)。每个查询字符串参数都成了返回对象的属性。这样就极大地方便了对每个参数的访问。

位置操作

location 对象可以通过很多方式来改变浏览器的位置。最常用的方式,就是使用assign() 方法并为其传递一个 URL:

location.assign("http://www.wrox.com");就可以立即打开新 URL 并在浏览器的历史记录中生成一条记录。如果是将 location.href或 window.location 设置为一个 URL 值,也会以该值调用 assign() 方法。

另外, 修改 location 对象的其他属性也可以改变当前加载的页面。 下面的例子展示了通过将 hash 、

search 、 hostname 、 pathname 和 port 属性设置为新值来改变 URL。

//假设初始 URL 为 http://www.wrox.com/WileyCDA/

//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"

location.hash = "#section1";

//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"

location.search = "?q=javascript";

//将 URL 修改为"http://www.yahoo.com/WileyCDA/"

location.hostname = "www.yahoo.com";

//将 URL 修改为"http://www.yahoo.com/mydir/"

location.pathname = "mydir";

//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"

location.port = 8080;

每次修改 location 的属性( hash 除外) ,页面都会以新 URL 重新加载。

对于使用 replace() 方法。这个方法只接受一个参数,即要导航到的 URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。在调用 replace() 方法之后,用户不能回到前一个页面

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

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

第8章 浏览器对象模型BOM 8.2 location对象的更多相关文章

  1. 第8章 浏览器对象模型BOM 8.1 window对象

    ECMAScript是javascript的核心,但如果要在web中使用javascript,那么BOM(浏览器对象模型)则无疑是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,在浏览器之间共 ...

  2. JavaScript高级程序设计(第3版)学习笔记·第8章——浏览器对象模型BOM

    转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...

  3. ExtJS浏览器对象模型BOM——命名空间和用户代理对象、Cookie

    BOM(浏览器对象模型(BrowserObjectModel)),允许访问和操控浏览器窗口.研发者通过使用BOM,可移动窗口.更改状态栏文本.执行其它不与页面内容发生直接联系的操作. 本文将从ExtJ ...

  4. 浏览器对象模型BOM

    第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...

  5. js浏览器对象模型-BOM

    bom browse object model 浏览器对象模型. 也就是window对象下面的东西. location 对象 window.location.href 表示打开窗口的路径. windo ...

  6. 浏览器对象模型BOM小结

    概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...

  7. 浏览器对象模型BOM(Browser Object Model)

    1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...

  8. JavaScript编程:浏览器对象模型BOM

    4.浏览器对象模型BOM: document.body.offsetwidth可以获取浏览器宽度. Window对象:          窗口操作:            1.moveBy(dx,dy ...

  9. JavaScript 浏览器对象模型 (BOM)

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”. 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准. 由于现代浏览器已经 ...

随机推荐

  1. codeforces 213div(2) 365 A.Good Number 365 B.The Fibonacci Segment

    #include <stdio.h> #include <string.h> bool vis[11]; int n, k; bool judge(int x) { memse ...

  2. 极力推荐一个简单好用的C++JSON库

      极力推荐一个简单好用的C++JSON库CJsonObject,让使用json如使用C++原生的结构体那般方便,随心所欲.CJsonObject是个优秀的C++JSON库,也许会是你见过的最为简单易 ...

  3. 手动编译PHP开发环境

    目录 手动编译PHP开发环境 问题复盘 部署环境及配置 目标环境 安装部署环境开始 首先安装PHP 安装mysql 安装nginx 手动编译PHP开发环境 这是一篇来自深夜加班的手稿 问题复盘 你有没 ...

  4. 初识代理——Proxy

    无处不在的模式——Proxy 最近在看<设计模式之禅>,看到代理模式这一章的时候,发现自己在写spring项目的时候其实很多时候都用到了代理,无论是依赖注入.AOP还是其他,可以说是无处不 ...

  5. JVM总结(二)

    JVM总结(2)java内存区域.字节码执行引擎 1.内存区域 程序计数器:知道线程执行位置,保证线程切换后能恢复到正确的执行位置. 虚拟机栈:存栈帧.栈帧里存局部变量表.操作栈.动态连接.方法返回地 ...

  6. Go中的命名规范

    1.命名规范 1.1 Go是一门区分大小写的语言. 命名规则涉及变量.常量.全局函数.结构.接口.方法等的命名. Go语言从语法层面进行了以下限定:任何需要对外暴露的名字必须以大写字母开头,不需要对外 ...

  7. zookeeper基本知识入门(一)

    之前我们在搭建hadoop分布式环境的时候用到过Zookeeper注册hadoop服务.那么到底Zookeeper在分布式环境中发挥了什么作用呢,这次我们就来讨论这个问题. 在分布式系统中通常都会有多 ...

  8. java并发编程(十五)----(线程池)java线程池简介

    好的软件设计不建议手动创建和销毁线程.线程的创建和销毁是非常耗 CPU 和内存的,因为这需要 JVM 和操作系统的参与.64位 JVM 默认线程栈是大小1 MB.这就是为什么说在请求频繁时为每个小的请 ...

  9. sublime text 3 15个常用插件介绍

    1.ColorPicker 功能:调色板(需要输入颜色时,可直接选取颜色) 使用:快捷键Windows: ctrl+shift+c 2.Emmet 功能:编码快捷键,前端必备 使用:在输入代码段后,按 ...

  10. 分析android studio的项目结构

    以最简单的工程为例子,工程名为随意乱打的Exp5,新建好工程后将项目结构模式换成android: 1.manifests AndroidManifest.xml:APP的配置信息 <?xml v ...