js高级第三版（第八章 BOM）_js边框粗细不设置会有默认值吗-优快云博客

本文链接：https://blog.youkuaiyun.com/lugr_shx/article/details/80921020

ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。

8.1 window 对象

BOM 的核心对象是 window，它表示浏览器的一个实例。

在浏览器中，window 对象有双重角色，

既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象

8.1.1 全局作用域

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

Windows Mobile 平台的 IE 浏览器不允许通过 window.property = value 之类的形式，直接在 window 对象上创建新的属性或方法。可是，在全局作用域中声明的所有变量和函数，照样会变成 window 对象的成员。

8.1.2 窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。

每个 window 对象都有一个 name 属性，其中包含框架的名称。

在使用框架的情况下，浏览器中会存在多个 Global 对象。在每个框架中定义的全局变量会自动成为框架中 window 对象的属性。由于每个 window 对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。例如，top.Object 并不等于 top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用 instanceof 操作符。

8.1.3 窗口位置

用来确定和修改 window 对象位置的属性和方法有很多。

IE、Safari、Opera 和 Chrome 都提供了screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。

Firefox 、 Safari 和 Chrome 则在screenX 和 screenY 属性中提供相同的窗口位置信息。

moveTo()接收的是新位置的 x 和 y 坐标值；

moveBy()接收的是在水平和垂直方向上移动的像素数

8.1.4 窗口大小

IE9+、Firefox、Safari、Opera 和 Chrome 均为此提供了 4 个属性：

innerWidth、innerHeight、outerWidth 和 outerHeight。

在 IE、Firefox、Safari、Opera 和 Chrome 中，

document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了页面视口的信息。

对于混杂模式下的 Chrome和IE6

使用document.body.clientWidth和document.body.clientHeight

使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小。

resizeTo()接收浏览器窗口的新宽度和新高度，

resizeBy()接收新窗口与原窗口的宽度和高度之差。

8.1.5 导航和打开窗口

使用 window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。

接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

如果为 window.open()传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的 URL。

第二个参数也可以是下列任何一个特殊的窗口名称：_self、_parent、_top 或_blank。

1. 弹出窗口

如果给 window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。

在不打开新窗口的情况下，会忽略第三个参数

设置值说明

fullscreen yes或no 表示浏览器窗口是否最大化。仅限IE

height 数值表示新窗口的高度。不能小于100

left 数值表示新窗口的左坐标。不能是负值

location yes或no 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no，

地址栏可能会隐藏，也可能会被禁用（取决于浏览器）

menubar yes或no 表示是否在浏览器窗口中显示菜单栏。默认值为no

resizable yes或no 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no

scrollbars yes或no 表示如果内容在视口中显示不下，是否允许滚动。默认值为no

status yes或no 表示是否在浏览器窗口中显示状态栏。默认值为no

toolbar yes或no 表示是否在浏览器窗口中显示工具栏。默认值为no

top 数值表示新窗口的上坐标。不能是负值width 数值表示新窗口的宽度。不能小于100

window.open()方法会返回一个指向新窗口的引用。引用的对象与其他 window 对象大致相似，但我们可以对其进行更多控制。

通过这个返回的对象，可以像操作其他窗口一样操作新打开的窗口，

调用 close()方法还可以关闭新打开的窗口。

2. 安全限制

在打开计算机硬盘中的网页时，IE 会解除对弹出窗口的某些限制。但是在服务器上执行这些代码会受到对弹出窗口的限制。

3. 弹出窗口屏蔽程序

如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么 window.open()很可能会返回 null。此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了

如果是浏览器扩展或其他程序阻止的弹出窗口，那么 window.open()通常会抛出一个错误。因此，要想准确地检测出弹出窗口是否被屏蔽，

8.1.6 间歇调用和超时调用

JavaScript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

超时调用需要使用 window 对象的 setTimeout()方法，

两个参数：要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）。

第一个参数可以是一个包含 JavaScript 代码的字符串（就和在 eval()函数中使用的字符串一样），也可以是一个函数。

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。

调用 setTimeout()之后，该方法会返回一个数值 ID，表示超时调用。

只要是在指定的时间尚未过去之前调用 clearTimeout()，就可以完全取消超时调用。

超时调用的代码都是在全局作用域中执行的，因此函数中 this 的值在非严格模式下指向 window 对象，在严格模式下是 undefined。

间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是 setInterval()

调用 setInterval()方法同样也会返回一个间歇调用 ID

要取消尚未执行的间歇调用，可以使用 clearInterval()方法并传入相应的间歇调用 ID

8.1.7 系统对话框

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。

通常使用 alert()生成的“警告”对话框向用户显示一些他们无法控制的消息，

confirm()从向用户显示消息的方面来看，这种“确认”对话框很像是一个“警告”对话框。但二者的主要区别在于“确认”对话框除了显示 OK 按钮外，还会显示一个 Cancel（“取消”）按钮，两个按钮可以让用户决定是否执行给定的操作。

为了确定用户是单击了 OK 还是 Cancel，可以检查 confirm()方法返回的布尔值：true 表示单击了 OK，false 表示单击了 Cancel 或单击了右上角的 X 按钮。

prompt()方法是一个“提示”框，用于提示用户输入一些文本。

如果用户单击了 OK 按钮，则 prompt()返回文本输入域的值；如果用户单击了 Cancel 或没有单击OK 而是通过其他方式关闭了对话框，则该方法返回 null。

除了上述三种对话框之外，Google Chrome 浏览器还引入了一种新特性。如果当前脚本在执行过程中会打开两个或多个对话框，那么从第二个对话框开始，每个对话框中都会显示一个复选框，以便用户阻止后续的对话框显示，除非用户刷新页面。

8.2 location 对象

location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

属性名例子说明

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的查询字符串。

8.2.1 查询字符串参数

这用以解析查询字符串，然后返回包含所有参数的一个对象：

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

8.2.2 位置操作

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

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

如果是将 location.href或 window.location 设置为一个 URL 值，也会以该值调用 assign()方法。

在 IE8、Firefox 1、Safari 2+、Opera 9+和 Chrome 中，修改 hash 的值会在浏览器的历史记录中生成一条新记录。在 IE 的早期版本中，hash 属性不会在用户单击“后退”和“前进”按钮时被更新，而只会在用户单击包含 hash 的 URL 时才会被更新。

当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用 replace()方法。

一个参数，即要导航到的URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录

与位置有关的最后一个方法是reload()，作用是重新加载当前显示的页面。

如果调用reload()时不传递任何参数，页面就会以最有效的方式重新加载。

8.3 navigator 对象

navigator 对象却是所有支持JavaScript 的浏览器所共有的

8.3.1 检测插件

    检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE 浏览器，可以使用plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。
     name：插件的名字。
     description：插件的描述。
     filename：插件的文件名。

 length：插件所处理的MIME 类型数量。

//检测插件（在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"));

hasPlugin()函数接受一个参数：要检测的插件名。

第一步是将传入的名称转换为小写形式，以便于比较

然后，迭代plugins 数组，通过indexOf()检测每个name 属性，以确定传入的名称是否出现在字符串的某个地方。

每个插件对象本身也是一个MimeType 对象的数组，这些对象可以通过方括号语法来访问。每个MimeType 对象有4 个属性：包含MIME 类型描述的description、回指插件对象的enabledPlugin、表示与MIME 类型对应的文件扩展名的字符串suffixes（以逗号分隔）和表示完整MIME 类型字符串的type。

检测IE 中的插件比较麻烦，因为IE 不支持Netscape 式的插件。在IE 中检测插件的唯一方式就是使用专有的ActiveXObject 类型，并尝试创建一个特定插件的实例。

IE 是以COM对象的方式实现插件的，而COM对象使用唯一标识符来标识。因此，要想检查特定的插件，就必须知道其COM标识符。

//检测IE 中的插件
function hasIEPlugin(name){
try {
new ActiveXObject(name);
return true;
} catch (ex){
return false;
}
}
//检测Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
//检测QuickTime
alert(hasIEPlugin("QuickTime.QuickTime"));

8.3.2 注册处理程序

registerContentHandler()法接收三个参数：要处理的MIME 类型、可以处理该MIME类型的页面的URL 以及应用程序的名称。

registerProtocolHandler()方法，它也接收三个参数：要处理的协议（例如，mailto 或ftp）、处理该协议的页面的URL 和应用程序的名称。

8.4 screen 对象