1. 关于window对象
它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。这意味着 在网页中定义的任何一个对象、变量和函数,都以 window 作为其 Global 对象,因此有权访问 parseInt()等方法。
1.1 全局作用域
全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。但全局变量不能通过delete
操作符删除,而直接在window对象上的定义的属性可以。通过声明添加的 window 属性有一个名为[[Configurable]]
的特性,这个特性的值被 设置为false,因此这样定义的属性不可以通过delete操作符删除。
另外,尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知 道某个可能未声明的变量是否存在
//这里会抛出错误,因为 oldValue 未定义
let newValue = oldValue;
//这里不会抛出错误,因为这是一次属性查询
//newValue 的值是 undefined
let newValue = window.oldValue;
1.2 关于窗口大小
获取页面视口的大小
let pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}
2. location对象
window.location
和 document.location
引用的是同一个对象。 location 对象的用处不只表现在它保存着当前文档的信息,还表现在它将 URL 解析为独立的片段
- hash
"#contents"
返回URL中的hash(#号后跟零或多个字符),如果URL 中不包含散列,则返回空字符串 - host
"www.wrox.com:80"
返回服务器名称和端口号(如果有) - hostname
"www.wrox.com"
返回不带端口号的服务器名称 - href
"http:/www.wrox.com"
返回当前加载页面的完整URL。而location对象的 toString()方法也返回这个值 - pathname
"/WileyCDA/"
返回URL中的目录和(或)文件名 - port
"8080"
返回URL中指定的端口号。如果URL中不包含端口号,则 这个属性返回空字符串 - protocol
"http:"
返回页面使用的协议。通常是http:或https: - search
"?q=javascript"
返回URL的查询字符串。这个字符串以问号开头
2.1 查询字符串参数
function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在 for 循环中使用
//逐个将每一项添加到 args 对象中
for (let i=0, let len = items.length; i < len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
2.2 位置操作
-
location.assign
调用该方法会立即打开新 URL并在浏览器的历史记录中生成一条记录。如果是将 location.href(最为常用)或 window.location 设置为一个URL 值,实际上是以该值调用 assign()方法。
修改location对象的其他属性也可以改变当前加载的页面,并且浏览器的历史记录中会生成一条新记录。
//将 URL 修改为"http://www.example.com/#a"
location.hash = "#a";
-
replace()
调用该方法会使浏览器位置改变,但不会在历史记录中生成新记录。这个方法只接受一个参数,即要导航到的 URL。在调用 replace()方法之后,用户不能回到前一个页面。 -
reload()
,调用改方法重新加载当前显示的页面。这个方法只接受一个Boolean
参数。要强制从服务器重新加载的话,传递参数 true。
3. navigator 对象
navigator 对象的属性通常用于检测显示网页的浏览器类型
4. history 对象
history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。
go()
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
-
back()
和forward()