JavaScript笔记：BOM

最新推荐文章于 2025-08-09 20:51:19 发布

玉儿Qi

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 兔子深夜课堂：JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u014328357/article/details/52193419

JavaScript 同时被 2 个专栏收录

185 篇文章

订阅专栏

兔子深夜课堂：JavaScript

117 篇文章

订阅专栏

window对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window
有双重角色：它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的global对象。着意味着，在网页中的任何一个对象、变量和函数，都以window为起global对象。

全局作用域

由于window对象同时扮演着global对象的角色，因此在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

var age = 29;
function sayAge(){ 
    alert(this.age);
}
alert(window.age); //29 
sayAge(); //29 
window.sayAge(); //29

可见，我们在全局作用域下定义了的属性和方法被自动的归类到了window对象名下。
但是还有一点区别：在全局作用域下定义的属性不能通过delete方法删除，可是直接在window名下定义的变量则可以用delete方法删除。

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

另外，尝试访问没有声明过的变量会抛出错误。但是通过查询window对象，可以知道某个变量是否存在。

// 抛出错误，因为oldValue未定义   
var newValue = oldValue;
// 不会抛出错误，因为这是一次属性查询
// newValue值是undefined
var newValue = window.oldValue;

窗口关系和框架

如果窗口中包含框架，那么每一个框架都有一个属于自己的window对象。在frame集合中，可以通过数值索引或者框架名来访问响应的window对象。每个window对象都有一个name属性，其中包含框架名称。如下是一个包涵框架的页面：

<html>
    <head>
        <title>Frameset Example</title>
    </head>
    <frameset rows="160,*">
        <frame src="frame.html" name="topFrame">
        <frameset cols="50%,50%">
            <frame src="anotherframe.html" name="leftFrame">
            <frame src="yetanotherframe.html" name="rightFrame">
        </frameset>
    </frameset>
</html>

// 对框架的访问方式：
topFrame：
window.frames[0]
window.frames["topFrame"]
top.frames[0]
top.frames["topFrame"]

leftFrame：
window.frames[1]
window.frames["leftFrame"]
top.frames[1]
top.frames["leftFrame"]

rightFrame：
window.frames[2]
window.frames["rightFrame"]
top.frames[2]
top.frames["rightFrame"]

top对象始终指向最外层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确的访问另一个框架。对于在一个框架中编写的任何代码来说，其中的window指向的都是那个框架的特定实例，而非最高层框架。上面的代码，展示了在最高层窗口中，通过代码来访问框架的不同方式。

窗口位置

用来确定和修改window对象的位置属性的方法有很多：例如，screenLeft和screenTop，分别用来确定窗口相对于屏幕左边和上边的值。
但是，不同浏览器下，访问这两个值的变量名可能不同，如下代码可以跨浏览器的取得窗口对象的位置信息：

var leftPos = (typeof window.screenLeft == "number") ?
                  window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
                  window.screenTop : window.screenY;

另外，使用moveTo()和moveBy()方法，可以移动窗口位置：

window.moveTo(0,0);// 移动至左上角
window.moveBy(0,100);// 向下移动100像素
window.moveTo(200,300);// 移动到位置200，300
window.moveBy(-50,0);// 向左移动50像素

注意，safari浏览器不支持该方法。

窗口大小
跨浏览器的确定窗口大小是件不容易的事。
IE9+ Firefox Safari Opera Chrome均为此提供了四个属性：innerWidth、innerHeight、outerWidth、outerHeight。但是它们表示的意义却不同。
在IE Firefox Safari Opera Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面的视口信息。
所以，虽然不能跨浏览器的获得窗口信息，却可以获得视口信息：

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

另外，使用resizeTo() resizeBy()两个方法，可以重新设定浏览器窗口大小。

window.resizeTo(100, 100);
window.resizeBy(100, 50);// 变宽100像素，变高50像素。

导航和打开窗口

window.open()方法，既可以导航到一个特定的url，也可以打开一个新的浏览器窗口。这个方法可以接受四个参数：
要加载的url，窗口目标，一个特性字符串，和一个布尔值（新页面是否取代浏览器历史记录中当前加载页面）。
2个参数的栗子：

//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");

弹出框：
如果 window.open()方法的第二个参数不是一个已经存在的窗口或者框架，那么该方法就会根据第三个参数给定的条件创建一个新的窗口或者标签页，不同条件以逗号分隔。如果这个参数为空，那么就会全部根据默认值来设置。
这是可以给定的参数：fullscreen，height，left，location，menubar，resizable，scrollbars，status，toolbar，top，width。

window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

这样，window.open()方法就回返回一个指向新窗口的引用。这个窗口和其他的window窗口大致类似，不过我们可以对其进行更多的控制。例如，有些浏览器默认不允许我们对窗口进行调整和移动。但是我们自己新建的窗口却可以随意进行这些操作。调用close()方法，即可关闭这个窗口。

新建的window窗口有一个opener属性，可以查看到是谁打开了它：

var wroxWin = window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");
    alert(wroxWin.opener == window);   //true

弹出框屏蔽程序：
大多数浏览器都安装有弹出窗口屏蔽程序，如下的代码可以检测我们的弹出框口是否被屏蔽：

var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
    alert("The popup was blocked!");
}

并且，如果是浏览器或者其他插件组织了窗口，那么window.open方法会抛出一个错误，因此可以用try catch的方法捕获：

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!");
}

间歇调用和超时调用

JavaScript是单线程的语言，但是它允许通过间歇调用和超时调用来调度代码在自定义的时间执行。

// 超时调用
var timeoutId = setTimeout(function() {
    alert("Hello world!");
}, 1000);
// 取消
clearTimeout(timeoutId);

// 间歇调用
var intervalId = setInterval (function() {
    alert("Hello world!");
}, 10000);
// 取消
clearInterval(intervalId);

系统对话框

浏览器通过alert() confirm() prompt()这三个方法，可以调用系统对话框向用户显示消息。
其中，confirm()方法会返回一个布尔值，表示用户点击了对话框中的确认还是取消。

if (confirm("Are you sure?")) {
    alert("I'm so glad you're sure! ");
} else {
    alert("I'm sorry to hear you're not sure. ");
}

这一个方法可以配合了a标签使用：

<a href="delete.html" class="btn btn-blue" onclick="return confirm('您确定删除？')">删除</a>

只有当用户点击确认时，a标签的href链接才会被触发。

prompt则用于提示用户输入一些文本内容。它接受两个参数，文本提示和文本默认值。

var result = prompt("What is your name? ", "");
if (result !== null) {
    alert("Welcome, " + result);
}

另外，还有两个可以通过js打开的对话框：打印和查找：

window.print();
window.find();

但是，有些浏览器会阻止这些对话框的弹出。

location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载文档的一些信息，还有一些导航的功能。事实上，location既是window对象的属性，也是document对象的属性。
如下是一些location对象的属性：
hash，host，hostname，href，pathname，port，protocol，search。
查找这些属性的方法为：window.location.pathname 或者document.location.pathname。

位置操作

location对象可以通过很多方式来改变浏览器位置，例如：

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

这几个方法的效果完全相同。

同时，还可以通过设定location的属性，来改变URL:

//初始URL：http://www.wrox.com/WileyCDA/
//修改为："http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//修改为："http://www.wrox.com/WileyCDA/?q=javascript" location.search = "?q=javascript";
//修改为："http://www.yahoo.com/WileyCDA/" 
location.hostname = "www.yahoo.com";
//修改为："http://www.yahoo.com/mydir/" 
location.pathname = "mydir";
//修改为："http://www.yahoo.com:8080/WileyCDA/" 
location.port = 8080;

每次修改location的属性（hash除外），页面都会重新加载。

当通过上面的方式修改了URL之后，浏览器的历史记录中会产生一条新的历史记录。用户可以通过返回，来返回到上一个页面。如果想要禁止这种行为，需要使用方法replace()，这个方法只接受一个参数，也就是新页面的URL信息。这个方法将使用户不能退回到前一个页面去。

reload()方法也是一个和位置有关的函数，作用是重新加载当前的页面。

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

放在reload方法后的代码可能会不执行，因此该方法最好放在代码最后一行。

navigator对象

它是识别客户端浏览器的事实标准。navigator对象是支持JS的所有浏览器共有的。虾面对navigator进行简单的介绍：

1、检测插件：

// 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"));

除了name属性之外，navigator. plugins还包括属性description(插件描述)、filename(文件名)、length等等。

检测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"));

2、注册处理程序：

Firefox 2为 navigator对象新增了registerContentHandler()和registerProtocolHandler()方法。这两个方法可以为一个站点指明它可以处理特定类型的信息。

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

registerProtocolHandler()方法也接受三个参数：要处理的协议，处理该协议的页面的URL和应用程序的名称。

screen对象

screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器信息，如像素宽度和高度等。每个浏览器中的screen对象中都包含不同的属性。具体的属性列表大家可以自行百度：http://www.w3school.com.cn/jsref/dom_obj_screen.asp

history对象

history对象保存着用户所有的上网记录。从窗口被打开的那一刻开始记录。

//后退一步
history.go(-1);
history.back();
//前进一步
history.go(1);
history.forward();  


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

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