BOM之location、navigator、screen、history

8.2 location 对象

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

8.2.1 查询字符串参数

尽管 location.search 返回从问号到 URL 末尾的所有内容,但却没有办法逐个
访问其中的每个查询字符串参数。为此,可以像下面这样创建一个函数,用以解析查询字符串,然后返
回包含所有参数的一个对象:

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

//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"

8.2.2 位置操作

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

location.assign("http://www.wrox.com");

下列两行代码与
显式调用 assign()方法的效果完全一样。

window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

在这些改变浏览器位置的方法中,最常用的是设置 location.href 属性。
另外,修改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 重新加载。
当通过上述任何一种方式修改 URL 之后,浏览器的历史记录中就会生成一条新记录,因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为,可以使用 **replace()**方法。这个方法只接受一个参数,即要导航到的 URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。在调用 replace()方法之后,用户不能回到前一个页面。

<!DOCTYPE html>
<html>
	<head>
		<title>You won't be able to get back here</title>
	</head>
	<body>
		<p>Enjoy this page for a second, because you won't be coming back here.</p>
		<script type="text/javascript">
			setTimeout(function () {
				location.replace("http://www.wrox.com/");
			}, 1000);
		</script>
	</body>
</html>

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

location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载)

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

8.3 navigator 对象

最早由 Netscape Navigator 2.0 引入的 navigator 对象,现在已经成为识别客户端浏览器的事实标准。

8.3.1 检测插件

对于非 IE 浏览器,可以使用plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。
 name:插件的名字。
 description:插件的描述。
 filename:插件的文件名。
 length:插件所处理的 MIME 类型数量。
一般来说, name 属性中会包含检测插件必需的所有信息,但有时候也不完全如此。在检测插件时,需要像下面这样循环迭代每个插件并将插件的 name 与给定的名字进行比较。

//检测插件(在 IE 中无效)
function hasPlugin(name){
	name = name.toLowerCase();
	for (var i=0; i < navigator.plugins.length; i++){
		if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){
			return true;
		}
	}
	return false;
}
//检测 Flash
alert(hasPlugin("Flash"));
//检测 QuickTime
alert(hasPlugin("QuickTime"));

检测 IE 中的插件比较麻烦,因为 IE 不支持 Netscape 式的插件。在 IE 中检测插件的唯一方式就是使用专有的 ActiveXObject 类型,并尝试创建一个特定插件的实例。 IE 是以 COM 对象的方式实现插件的,而 COM 对象使用唯一标识符来标识。因此,要想检查特定的插件,就必须知道其 COM 标识符。例如, Flash 的标识符是 ShockwaveFlash.ShockwaveFlash。知道唯一标识符之后,就可以编写类似下面的函数来检测 IE 中是否安装相应插件了。

//检测 IE 中的插件
function hasIEPlugin(name){
	try {
		new ActiveXObject(name);
		return true;
	} catch (ex){
		return false;
	}
}
//检测 Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
//检测 QuickTime
alert(hasIEPlugin("QuickTime.QuickTime"));
//检测所有浏览器中的 Flash
function hasFlash(){
	var result = hasPlugin("Flash");
	if (!result){
		result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
	}
	return result;
}
//检测所有浏览器中的 QuickTime
function hasQuickTime(){
	var result = hasPlugin("QuickTime");
	if (!result){
		result = hasIEPlugin("QuickTime.QuickTime");
	}
	return result;
}
//检测 Flash
alert(hasFlash());
//检测 QuickTime
alert(hasQuickTime());

8.3.2 注册处理程序

Firefox 2 为 navigator 对象新增了 registerContentHandler()和 registerProtocolHandler()方法(这两个方法是在 HTML5 中定义的)其中, registerContentHandler()方法接收三个参数:要处理的 MIME 类型、可以处理该 MIME类型的页面的 URL 以及应用程序的名称。举个例子,要将一个站点注册为处理 RSS 源的处理程序,可以使用如下代码。

navigator.registerContentHandler("application/rss+xml",
"http://www.somereader.com?feed=%s", "Some Reader");

Firefox 4 及之前版本只允许在 registerContentHandler()方法中使用三个
MIME 类型: application/rss+xml、 application/atom+xml 和 application/
vnd.mozilla.maybe. feed。这三个 MIME 类型的作用都一样,即为 RSS 或 ATOM
新闻源(feed)注册处理程序。

8.4 screen 对象

screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。

window.resizeTo(screen.availWidth, screen.availHeight);

8.5 history 对象

history 对象保存着用户上网的历史记录,是 window对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的window 对象关联。出于安全方面的考虑,开发人员无法得知用户浏览过的 URL。借由用户访问过的页面列表,同样可以在不知道实际 URL 的情况下实现后退和前进。使用 **go()**方法可以在用户的历史记录中任意跳转,可以向后也可以向前。负数表示向后跳转(类似于单击浏览器的“后退”按钮),正数表示向前跳转

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

也可以给 go()方法传递一个字符串参数,此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退,也可能前进,具体要看哪个位置最近。如果历史记录中不包含该字符串,那么这个方法什么也不做

//跳转到最近的 wrox.com 页面
history.go("wrox.com");
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");

另外,还可以使用两个简写方法 back()和 forward()来代替 go()。顾名思义,这两个方法可以模仿浏览器的“后退”和“前进”按钮。

//后退一页
history.back();
//前进一页
history.forward();

除了上述几个方法外, history 对象还有一个 length 属性,保存着历史记录的数量。这个数量包括所有历史记录,即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言,history.length 等于 0。通过像下面这样测试该属性的值,可以确定用户是否一开始就打开了你的页面。

if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}

当页面的 URL 改变时,就会生成一条历史记录。在 IE8 及更高版本、 Opera、
Firefox、 Safari 3 及更高版本以及 Chrome 中,这里所说的改变包括 URL 中hash 的变化(因此,设置 location.hash 会在这些浏览器中生成一条新的历史记录)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值