欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-17 11:32:52
BOM BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关,那么,什么是BOM呢?我们可以从这几点解析一下: 1.BOM是Bro ......
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对象
  浏览器:可以运行html+css+js的一个环境,这个环境有很多种,所以会产生很多的兼容问题。大 部分浏览器把自己的大部分功能都抽象出来描述成一个对象,这个对象叫window,window对象是浏览器内置的一个对象,是js中全局对象的寄存地,相当于bom的一个抽象。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ecmascript规定的一个global对象,因此有权访问parseint()等方法。
剑指前端(前端入门笔记系列)——BOM
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;                           //定义全局变量
window.name = "ai-fisher";              //在window对象上定义变量(属性)
 
//在ie<9时抛出错误,其他浏览器返回false
delete window.age;                      //删除全局变量
//在ie<9时抛出错误,其他浏览器返回true
delete window.name;                     //删除window对象上定义的变量
 
console.log(window.age);                //18
console.log(window.name);               //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();   //前进,需要后退一下之后,才有前进的方向
history.go(num);     //参数为正,前进相应的数目,为负,后退相应的数目,为0,刷新
  • location对象(包含当前url的相关信息,而history对象不能具体反映url的相关信息)
  location对象是最有用的属性之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是很特别的一个对象,因为它既是window对象的属性,也是document对象的属性;换句话说,window.location和document.location引用的是同一个对象。location对象的用处不只是表现在他保存着当前文档的信息,还表现在它将url解析为独立的片段,让开发人员可以通过不同的属性来访问这些片段。
属性
剑指前端(前端入门笔记系列)——BOM
方法
assign()方法可以立即打开新url并在浏览器的历史记录中生成一条记录。
location.assign(url);   //加载新页面,当url为空字符时,加载当前页面
如果将location.href或window.location设置为一个url值,也会以该方法调用assign()方法。。例如:下列两行代码与显示调用assign()方法的效果完全一样。
window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";
  跟位置有关的最后一个方法是reload()方法,作用是重新加载当前显示的页面,如果调用reload()时不穿敌人和参数,页面就会以最有效的方式重新加载。也就是说,如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。
location.reload();
如果要强制从服务器重新加载,则需要像下面这样为该方法传递参数true
location.reload();  //传递一个true,不使用缓存刷新
  • navigator对象(浏览器信息):
属性
navigator.appname;   //返回当前浏览器的名称
navigator.appversion;//返回当前浏览器的版本号
navigator.platform;  //返回当前计算机的操作系统
以上方法已经在逐渐被抛弃,出现一个新的属性替代这些属性:
navigator.useragent; //返回浏览器信息
  • frames对象:包含当前页面所有的框架信息
属性
 frames.length;                  //返回当前页面的框架数量
 frames[0].location;             //修改第一个框架的地址
  • screen对象:包含当前显示屏信息
  javascript中有几个对象在编程中用处不大,而screen对象就是其中之一。screen对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器总的screen对象都包含着各不相同的属性。下面列出几个属性是相对来说比较实用而且各浏览器都支持的属性。
属性
 screen.width/height             //屏幕总宽高度
 screen.availwidth/availheight   //屏幕的宽高(不包括任务栏)