零js基礎 | 程序設計 | 8 - BOM
BOM核心
控制窗口、框架和弹出窗口
利用location 对象中的页面信息
使用navigator对象了解浏览器；
全局变量不能通过delete 操作符删除，而直接在window 对象上的定义的属性可以
var age = 29;
window.color = "red";
//在IE < 9 时抛出错误，在其他所有浏览器中都返回false
delete window.age;
//在IE < 9 时抛出错误，在其他所有浏览器中都返回true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined//这里会抛出错误，因为oldValue 未定义
var newValue = oldValue;
//这里不会抛出错误，因为这是一次属性查询
//newValue 的值是undefined
var newValue = window.oldValue;window.frames[0]或者window.frames["topFrame"]来引用上方的框架。不过，恐怕你最好使用
top 而非window 来引用这些框架（例如，通过top.frames[0]）
与top 相对的另一个window 对象是parent。顾名思义，parent（父）对象始终指向当前框架的
直接上层框架。在某些情况下，parent 有可能等于top；但在没有框架的情况下，parent 一定等于
top（此时它们都等于window）。
ff支持 screenX 和screenY
var leftPos = (typeof window.screenLeft == 'number') ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == 'number') ?
window.screenTop : window.screenY;//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50 像素
window.moveBy(-50,0);所有浏览器都有：innerWidth/innerHeight/outerWidth/outerHeight
IE9+/Safari/Firefox: outerWidth/outerHeight返回浏览器本身尺寸
Opera：outerWidth/outerHeight：表示单个标签页对应的浏览器窗口大小；而innerWidth/innerHeight表示该容器中页面视图的大小 - 边框宽度；
chrome:outerWidth/outerHeight与 innerWidth/innerHeight返回相同的值，即viewport大小而非浏览器窗口大小
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}compatMode 检查是否处于标准模式；
使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个
参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽
度和高度之差。来看下面的例子。
//调整到100×100
window.resizeTo(100, 100);
//调整到200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);
window.open(要加载的URL，窗口目标，一个特性字条串，是否当前页面打开)
，所以
< a href="http://www.wrox.com" target="topFrame"></a>
====
window.open("http://www.wrox.com/", "topFrame");window.close()只适应于window.open()打开的窗口；弹出窗口打调用top.close();
创建的window 对象有一个opener 属性，其中保存着打开它的原始窗口对象
var wroxWin = window.open('http://www.w.com','w','height=400,width=400,top:10,left=10,resizable = yes')
console.log(wroxWin.opener = window) //truechrome中设置opener属性为null，表示在单独进程中独立运行；
var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.opener = null;检测是否被屏蔽弹出
var blocked = false;
try {
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null) {
blocked = true;
}
} catch (ex) {
blocked = true;
}
if (blocked) {
alert("The popup was blocked!");
}
}返回布尔值；
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you're not sure. ");
}返回false或字符串
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}localtion对象
既是window对象，也是document对象;
window.location == document.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;
}//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"
跳转新窗口：
location.assign('http://www.baidu.com')
window.location = 'http://www.baidu.com'
location.href = 'http://www.baidu.com' //假设初始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;禁止返回后退页面
window.location.replace('http://baidu.com')重新加载 reload()
location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）navigator
页面在IE7提示升级
if(window.ActiveXObject)
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0" || trim_Version=="MSIE7.0" )
{
$(".ie7andie6").show();
$(".contentnone").hide();
}
}跳到手机网站
var a=navigator.userAgent;
if(a.indexOf("Android")!=-1 || a.indexOf("iPhone")!=-1 || a.indexOf("iPad")!=-1 ){
//跳转到手机网站
}检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE 浏览器，可以使用
plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。
name：插件的名字。
description：插件的描述。
filename：插件的文件名。
length：插件所处理的MIME 类型数量。
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"));
}这个hasPlugin()函数接受一个参数：要检测的插件名
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());screen 对象
JavaScript 中有几个对象在编程中用处不大，而screen 对象就是其中之一。screen 对象基本上只
用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器
中的screen 对象都包含着各不相同的属性，下表列出了所有属性及支持相应属性的浏览器。
history 对象
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的wrox.com 页面
history.go("wrox.com");
//跳转到最近的nczonline.net 页面
history.back();
//前进一页
history.forward();history 对象还有一个length 属性
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}虽然history 并不常用，但在创建自定义的“后退”和“前进”按钮，以及检测当前页面是不是
用户历史记录中的第一个页面时，还是必须使用它。