宿主对象BOM

BOM

• ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）
• 则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，
• 缺少事实上的规范导致 BOM 有很多问题，因为浏览器提供商会按照各自的想法随意去扩展它。W3C 为了把浏览器中
• JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规范中。

window对象

• BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，
• 它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
• 这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 - Global 对象，因此有权访问
• isNaN()、isFinite()、parseInt()、parseFloat() 等方法。

全局变量与windows对象属性的差别

• 抛开全局变量会成为 window 对象的属性不谈，定义全局变量与在 window 对象上直接定义属性还是有一点差别：
• 全局变量不能通过 delete 运算符删除，而直接在 window 对象上的定义的属性可以

window.open()/close方法

• open方法的四个参数：可以接收4个参数：要加载的URL、窗口目标、一个特性字符串、

• 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值后两个参数有很大的兼容性问题

• close() 方法仅适用于通过 window.open() 打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。

定时器

// 不建议传递字符串
setTimeout("console.log('Hello world!') ", 1000);

// 推荐的调用方式
setTimeout(function() { 
	console.log("Hello world!"); 
}, 1000);

• 第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。
• JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，
• 就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。
• setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中(添加的过程是异步的)。
• 如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

BOM浏览器对象模型

• 浏览器对象模型

• BOM可以使我们通过JS来操作浏览器

• 在BOM中为我们提供了一组对象，用来完成对浏览器的操作

• BOM对象

  1. Window
     • 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
  2. Navigator
     • 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  • 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
  • 比如：ActiveXObject

window.onload = function(){
	var ua = navigator.userAgent;
	if(/firefox/i.test(ua)){
		alert('我是火狐~');
	}else if(/chrome/i.test(ua)){
	alert('Chrome浏览器~');
	}else if('ActiveXObject' in window){
	alert('我是IE浏览器~~');
};
};

3. Location

   • 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

   如果直接将location属性修改为一个完整的路径，或相对路径
   则我们页面会自动跳转到该路径，并且会生成相应的历史记录

   //location = “http://www.baidu.com”;

• assign()

• 用来跳转到其他的页面，作用和直接修改location一样

• location.assign(“http://www.baidu.com”);

• reload()

• 用于重新加载当前页面，作用和刷新按钮一样

• 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

• location.reload(true);

• replace()

• 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
  不会生成历史记录，不能使用回退按钮回退

  4. History

     • 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
       由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
       而且该操作只在当次访问时有效

     • length

     • 属性，可以获取到当成访问的链接数量

     • alert(history.length);

     • back()

     • 可以用来回退到上一个页面，作用和浏览器的回退按钮一样

     • history.back();

     • forward()

     • 可以跳转下一个页面，作用和浏览器的前进按钮一样

     • history.forward();

     • go()

     • 可以用来跳转到指定的页面

     • 它需要一个整数作为参数
       1:表示向前跳转一个页面 相当于forward()
       2:表示向前跳转两个页面
       1:表示向后跳转一个页面
       2:表示向后跳转两个页面

window.onload = function(){

	var btn01 = document.getElementById('btn01');
	var btn02 = document.getElementById('btn02');
	btn01.onclick = function(){
		history.back();
	};
	btn02.onclick = function(){
		history.forward();
	};
	alert(history.length);
};

5. Screen

   • 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

   • 这些BOM对象在浏览器中都是作为window对象的属性保存的，
     可以通过window对象来使用，也可以直接使用