JS基础——BOM

最新推荐文章于 2024-04-26 10:34:14 发布

naildingding

最新推荐文章于 2024-04-26 10:34:14 发布

阅读量426

点赞数 1

分类专栏： JS基础红宝书文章标签： javascript

本文链接：https://blog.csdn.net/small_sesame/article/details/119799093

版权

JS基础同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

红宝书

7 篇文章 0 订阅

订阅专栏

JS = ES + BOM + DOM，其中ES是JS的核心。

所谓的BOM即 浏览器对象模型（Browser Object Model）。BOM赋予了JS操作浏览器的能力，即window操作。

DOM则用于创建删除节点，操作HTML文档。

BOM的知识点大致可以分为五个对象去讨论：window对象，location对象，navigator对象，sccreen对象，history对象。

这个五个对象会提供一些方法和api，现阶段我们需要去了解的就是这些对象放出的来的方法有哪些，是什么作用。

一、widow对象（BOM最核心的对象）

window对象，表示浏览器的一个实例。

1、全局作用域：

在网页中，Window == Global
全局变量不能被delete销毁，但是window中定义的定义是属性是可以通过delete销毁的。
```
var age = 9;
window.color = "red";

delete window.age;    //返回false
delete window.color;    //true
```

尝试访问未声明的变量会抛出错误，但查询window对象可以知道某个属性是否存在

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

2、窗口关系框架：frame、frames[]、window、top、parent、self、moveTo()、moveBy()

每个框架都包含自己的构造函数，如 :

top.Object != top.frames[0];

3、窗口位置：screenLeft、screenTop、screenX、screenY

Chrome、Safari、Opera：screenLeft、screenRight
Firefox：screenX、screenY

4、窗口大小:outerHeight、outerWidth、innerHeight、innerWidth

上面四个值，Chrome返回的都是相同的值——视口（viewport）大小而非浏览器窗口大小；
Firefox、Opera、Safari返回不同的值（即分别为浏览器窗口大小、视口大小）。

document.documentElement.clientWidth
document.documentElement.clientHeight
这两个值Chrome、Firefox、Opera均返回视口信息。

resizeTo()、resizeBy()
这两个方法可能会被浏览器禁用

5、导航和打开窗口 window.open(1，2，3，4)

(1)、window.open(“url”，traget，“设置值”，false/true)

一般只需要传递第一个参数。
第一个参数是打开的新窗口位置，如果第二个参数 target值为已经存在的窗口或框架的名字，那么就在该窗口下面加载第一个url。

第三个参数是打开的新页面的设置值。

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

设置	值	说明
height	数值	不能小于100
width	数值	不能小于100
top	数值	不能是负值
left	数值	不能是负值
location	yes/no	地址栏，不同浏览器默认值不同
menubar	yes/no	显示菜单栏，默认no
resizable	yes/no	是否可改变大小，默认no
scrollbars	yes/no	是否允许滚动，默认no
status	yes/no	显示状态栏，默认no
toolbar	yes/no	显示工具栏，默认no

第四个参数，只有在不打开新窗口情况下使用——表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

（2）、window.opener()、newWindowName.close()

弹出窗口有一个opener属性，保存着打开它的原始窗口对象。（这个属性只在弹出窗口的最外层window对象（top）中有定义）

虽然弹出窗口有这么一个指针指向打开它的原始窗口，但是原始窗口并没有这样的指针指向弹出窗口。
窗口并不跟踪记录它们打开的窗口，因此我们要在必要时手动实现跟踪。

有些浏览器的不同的标签页是在独立的进程中运行——Chrome，当一个标签页打开另一个标签页时，它们如果需要通信，就不能运行在独立的进程中。
如果要运行在独立的进程中，就要新创建的标签页的opener属性设置为null：
window.open("https://www.wrox.com/","wroxWindow",
            "height=400,width=400,top=10,left=10,resizable=yes");
wroxWindow.opener = null;

（3）、安全限制和弹出窗口屏蔽程序

浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()返回的值为null
浏览器扩展程序、或其他程序阻止的弹出窗口，那么window.open()通常抛出一个错误

//想要准确地检测弹出窗口是否被屏蔽，必须检测返回值的同时，将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!");
}

6、超时调用和间歇调用：setTimeOut（，）、setInterval（，）

超时调用：setTimeout()，接收两个参数——第一个为要运行的代码，第二个为经过多少时间将代码添加到JavaScript的执行队列中去。

间歇调用：setInterval()，同上，但是这个方法的函数会不断循环执行，直到页面被卸载。（一般不建议使用简写调用，因为间歇调用可以用setTimeout()代替，并有更好的效果）

var num = 0;
var max = 10;

function incrementNumber(){
    num++;

    //如果执行次数未达到max设定的值，则设置为一次超时调用
    if(num < max){
        setTimeout(incrementNumber,500);
    }else{
        alert("Done");
    }
}

setTimeout(incrementNumber,500);

7、系统对话框：alert（）、confirm（）、prompt（）

前两个对话框不赘述，很常见。

第三个对话框，是一个“提示”框，用于提示用户输入一些文本，提示对话框除了显示OK和Cancel按钮之外，还要显示一个文本输入域，乙供用户在其中输入内容。

prompt()方法接受两个参数：要显示给用户的文本提示和文本输入域的默认值。

prompt()方法返回用户在文本输入域中输入的值。如果没有输入，则返回null。

二、location对象（BOM最有用的对象）

提供当前窗口中加载的文档有关信息

window.location === document.location

location所有属性：

属性名	例子	说明
hash	“contents”	返回URL中的hash
host	“www.wrox.com:80”	返回服务器名称和端口号
hostname	“www.wrox.com”	返回不带端口号的服务器名称
href	"https://www.wrox.com"	返回当前加载页面的完整URL。 location的toString()方法也返回这个值
pathname	“/WileyCDA/”	返回URL中的目录和（或）文件名
port	“8080”	返回URL中指定的端口号。如果URL不包含端口号，则返回空字符串。
protocol	“https://”	返回页面使用的协议。一般为http:或https:
search	"?q=javascript"	返回URL查询字符串。这个字符串以问好开头。

1、查询字符串参数：location.search（）

function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
    var qs = (location.search.length >0 ? location.search.substring(1):"",
        args = {},    //保存数据的对象
        items = qs.length ? qs.split("&") :[],    //取得每一项
        item = null,
        name = null,
        value = null,
        i = 0,
        len = items.length;

    //逐个将每一项添加到args对象中
    for(i=0;i<lem;i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if(name.length){
            args[name] = value;
        }
    }

    return args;
}

2、位置操作:

这三个的结果是一样的，都是在改变浏览器的位置：

location.assign("url")
location.href = "url";
window.location = "url";

（1）修改location的属性值——location.hash =".."，location.search =“..”等。

（2）禁用前进、后退行为：window.replace(“url")。
因为通过第一种方式修改以后，会在浏览器的历史记录中生成一条新纪录，用户可以通过单
击“后退”按钮导航到前一个页面。
使用replace()后，结果虽然会导致浏览器位置改变，但是不会再历史记录中生成新记录。用
户不能回到前一个页面。

（4）reload()

三、navigator对象

1、检测插件：navigator.plugins[i]、navigator.hasPlugin("name")

navigator.plugins[i]数组中每个项包含四个属性：

name：插件的名字
description：插件的描述
filename：插件的文件名
length：插件所处理的MIME类型数量

2、处理注册程序：registerContentHandler()、registerProtocolHandler()

这两个方法可以让一个站点指明它可以处理特定类型的信息。

registerContentHandler（）接收三个参数：要处理的MIME类型、可以处理该MIME类型的页面的URL、应用程序的名称。
registerProtocolHandler（）接收三个参数：要处理的协议、处理该协议的页面的URL、应用程序的名称。

三、screen对象

在编程中用处不大。

其中包括了浏览器窗口外部的显示器信息，如像素宽度、高度等。

四、history对象

历史记录。

history.go(-1);    //负为后退，正为前进

history.forward();
history.back();

history.length();    //保存着历史记录的数量