008——BOM

迷南。 2022-11-06 08:58 180阅读 0赞

> BOM（浏览器对象模型），浏览器供应商按照自己的想法随意实现BOM，导致BOM既有意思，又有问题。

#### 8.1 window对象 ####

BOM的核心对象是window，它表示浏览器的一个实例。  
window既是**JavaScript访问浏览器的API**，又是**ECMAScript规定的Global对象**。  
这意味着，网页中所有对象、变量和函数，都以window为Global对象，因此有权访问parseInt方法。

##### 8.1.1 全局作用域 #####

window扮演ECMAScript的Global对象，因此全局作用域中声明的变量、函数都会成为window对象的属性和方法。

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

全局变量和window对象上的属性差别：

*  全局对象不能通过delete操作符删除；
 *  直接在window对象上定义的属性可以。

var age = 29;
    window.corlor = "red";
    
    delete window.age;  // IE<9抛出错误，其他都返回false
    delete window.color;  // IE<9抛出错误，其他都返回true
    
    alert(window.age);      // 29
    alert(window.color);    // undefined

尝试访问未声明的变量会抛出错误，通过window对象可以知道某个未声明的变量是否存在。

##### 8.1.2 窗口关系及框架 #####

1.  window对象都有一个name属性，包含框架的名称
2.  top对象始终指向最高【最外】层的框架
3.  parent对象是当前框架的直接上层框架。parent可能等于top，在没有框架情况下，一定等于top【此时他们都等于window】
4.  self属性，始终指向window，为区别top和window

##### 8.1.3 窗口位置 #####

window.movoTo(x,y)  
window.moveBy(x,y)

##### 8.1.4 窗口大小 #####

容器中页面视图区的大小：innerWidth、innerHeight  
视口（viewport）大小【IE9+、Safary、FireFox表示浏览器窗口大小】：outerWidth、outerHeight  
标准模式下：document.documentElement.clientWidth/Height  
混杂模式：document.body.clientWidth/Height  
window.resizeTo(x,y)  
window.resizeBy(x,y)

##### 8.1.5 导航和打开窗口 #####

window.open(url,target,specStr,replaceFlag)  
// 打开指定URL【必须】，窗口目标，一个特性字符串，一个表示新页面是否取代浏览器历史记录中的当前加载页面的布尔值

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

如果有name属性为topFrame的窗口或链接，就会在改topFrame窗口或链接下加载这个URL，否则，将新创建一个窗口并将其命名为topFrame。  
另外第二个参数还可以为：**\_self、\_parent、\_top、\_blank**

**1、弹出窗口**  
如果给window.open()的第二个参数不是一个已经存在的窗口或框架，那么该方法则会返回根据在第三个参数位置上传的字符串创建一个新窗口后新标签页。  
第三个参数是逗号分隔开的字符串，表示新窗口都显示哪些特性。

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

有些浏览器默认不允许改变主浏览器窗口的大小或位置，但允许通过window.open()创建的窗口调整大小或移动位置。

var wronWindow = window.open("http://www.baidu.com","wrongWindow","height=400,width=400,top=10,left=10,resizable=yes");
    wrongWindow.resizeTo(500,500);
    wrongWindow.moveTo(100,100);
    wronWindow.close();

**2、安全限制**

*  不允许屏幕之外创建弹出窗口
 *  不允许将弹窗移动到屏幕外
 *  不允许关闭状态栏等

**3、弹出窗口屏蔽程序**  
通过判断window.open是否返回null，判断是否开启屏蔽

##### 8.1.6 间歇调用和超时调用 #####

JavaScript是单线程语言，但它允许设置超时值和间歇时间值来调度特定代码在特定时刻执行。  
**超时调用**：SetTimeout(func, time) // time 单位毫秒,time毫秒后执行一次func  
返回一个数值ID，表示超时调用。

var timeoutId = setTimeout(function() { 
        alert("Hello World!");
    }, 1000);
    
    clearTimeOut(timeoutId);

**间歇调用**：setInterVal(func, time) // 每隔time毫秒执行一次func

var interId = setInterval(function() { 
        alert("Hello World!");
    }, 1000);
    
    clearInterval(interId);

##### 8.1.7 系统对话框 #####

alert(str)  // 一个确定按钮
    confirm(str)   //警告对话框，确定、取消【走各自逻辑】
    prompt(tipStr,defaultVal) // 确定、取消，确定则返回对话框中输入的值，取消则返回null

Chrome：find()、print()方法

#### 8.2 location对象 ####

hash、host、hostname、href、pathname、port、protocol【页面协议：http/https】、search

##### 8.2.1 查询字符串参数 #####

location.search // 返回URL查询字符串，问号开头  
如，www.baidu.com?page=aaa&time=143278490 // location.search=?page=aaa&time=143278490

##### 8.2.2 位置操作 #####

location.assign(url) // window.location和location.href底层都调用了location.assign。  
修改location的其他属性也可以改变URL  
hash、search、hostname、pathname、port

// 假设初识URL为http://www.google.com/WileyCDA/
    // 将URL改为http://www.google.com/WileyCDA/#section1
    location.hash = "#section1";
    
    // 将URL改为http://www.google.com/WileyCDA/?q=javascript
    location.search = "?q=javascript";
    
    // 将URL改为http://www.baidu.com/WileyCDA/
    location.hostname = "http://www.baidu.com"
    
    // 将URL改为http://www.baidu.com/WileyCDA/mydir/
    location.pathname = "mydir";
    
    // 将URL改为http://www.baidu.com:8080/WileyCDA/
    location.port = 8080;

上述方法都会在浏览器生成一条新纪录，用户可以点击后退返回上一次访问url，  
如果不需要后退可以使用：  
location.replace(url)方式替代

重新加载当前页面：

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

#### 8.3 navigator对象 ####

识别客户端浏览器的事实标准。  
特定属性  
检测插件  
注册处理程序

#### 8.4 screen对象 ####

表明客户端的能力

*  浏览器窗口外部吸纳使其的信息
 *  如像素宽度和高度等。

#### 8.5 history对象 ####

保存用户上网历史记录，属于window属性

history.go(-1)  // 后退一页
    history.go(1)   // 前进一页
    history.go(2)   // 前进两页
    history.back()  // 后退，不传参
    history.forward()   // 前进，不传参