B O M 入 门 基 本 常 识

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

剑指前端(前端入门笔记系列)——BOM

ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关,那么,什么是BOM呢?我们可以从这几点解析一下:

1.BOM是Browser Object Model的缩写,简称浏览器对象模型。这个对象就是window

2.BOM提供了独立于内容而与浏览器窗口进行交互的对象,也就是BOM是浏览器厂家分别推出

3.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性

4.BOM缺乏标准,但是BOM提供了ECMAScript的运行平台

5.BOM最初是Netscape浏览器标准的一部分

6.BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象为window

window对象

window对象表示浏览器的一个实例,这就意味着全局作用域中声明的变量、函数都会变成window对象的属性和方法,例如:var age = 29;

function sayAge(){

return "123";

console.log(age === window.age); --true

console.log(sayAge === window.sayAge); --true

我们可以看到,全局变量age其实就是window.age,而全局函数sayAge就是window.sayAge,只不过window可以省略不写,我们写的全局变量和函数其实都会自动归在window对象名下,那么我们再来验证一下:

console.log(parseInt === window.parseInt); --true

console.log(parseFloat === window.parseFloat); --true

console.log(setInterval === window.setInterval); --true console.log(setTimeout === window.setTimeout); --true

console.log(clearInterval === window.clearInterval); --true

console.log(clearTimeout === window.clearTimeout); --true console.log(Number === window.Number); --true

console.log(Date === window.Date); --true

console.log(String === window.String); --true

console.log(isNaN === window.isNaN); --true

这些都是我们常用的内置函数,它们也都属于window对象

【注】抛开全局变量会变成window对象的属性不说,定义全局变量与在window对象上面直接定义属性还是有区别的,区别就是全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以:

var age = 18; --定义全局变量

= "AI-fisher"; --在window对象上定义变量(属性)

--在IE9时抛出错误,其他浏览器返回false

delete window.age; --删除全局变量

--在IE9时抛出错误,其他浏览器返回true

delete ; --删除window对象上定义的变量

console.log(window.age); --18

console.log(); --undefined

内部实现的规则是:var语言添加的window属性有一个名为[[Configurable]]的特性,这个特性的值被设置为false,因此这样定义的属性不可以通过delete操作符删除。IE8及更早版本在遇到使用delete删除window属性的语句时,不管该属性最初是如何创建的,都会抛出错误,以示警告。IE9及更高版本不会抛出错误。

属性(窗口位置):

用来确定和修改window对象位置的属性和方法有很多。有些浏览器使用screenTop和screenLeft来表示窗口相对于屏幕左边和上边的位置,比如:IE和Opera。有些浏览器则使用screenX和screenY 属性,比如Firefox。而有些浏览器两种都支持,比如:Safari和Chrome。

alert(要显示的文本); --弹出信息框

prompt(提示对话框信息); --弹出输入框,点击确定,返回字符

串,点击取消,返回null

confirm(提示文字); --点击确定返回true,点击取消返回false --关闭浏览器,火狐不支持,但都支持通过别的网页打开的新的网页关闭,不允许关闭非脚本打开的页面

close();

open(url,name,feature,replace);

--url,可选,要在新窗口中显示的文档的URL

--name,可选,声明了新窗口的名称

--feature,replace自行扩展

--谷歌会默认把系统自动打开的新网页阻止掉,但不阻止通过事件打开的网页

history对象(包含浏览器访问过的url)

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,因为history是window对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对爱那个与特定的window对象关联。处于安全方面的考虑,开发人员无法得知用户浏览过的URL。不过,借由用户访问过的页面列表,同样可以在不知道实际URL 的情况下实现后退和前进。

history.length; --返回历史记录的数量

history.back(); --后退,加载前一个url。

history.forward(); --前进,需要后退一下之后,才有前进的方向

相关文档
最新文档