BOM笔记

BOM

前言

众所周知,JavaScript对象是由ECMAScript,DOMBOM组成,DOM和BOM都是具有功能的对象模型,DOM(文档对象模型)映射成多层次的dom节点,并提供了一系列操作DOM的方法功能,而BOM则是支持访问和操作浏览器窗口对象的一系列功能.

BOM的核心--window对象

BOM的核心是window对象,它代表浏览器的一个实例,在浏览器中,window既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.

比如在全局作用域中定义的变量和函数会自动归在window对象名下.但是有一点区别在于:直接定义的全局变量不能通过delete操作符删除(使用var添加的属性有一个configurable特性,这个特性被设置为false)

窗口以及框架

框架

<frameset>
  <frame src="" name="topFrame">
    <frameset>
        <frame name="leftFrame"></frame>
        <frame name="rightFrame"></frame>
    </frameset>
   </frame>
</frameset>

在上述代码中,定义一个框架集,一个框架居上,两个框架居下,每个框架都拥有自己的window对象,并且保存在frames中

对于框架的引用,既可以通过window.frame[0]来引用上方框架,也可以使用top对象(始终指向最高层的框架,也就是浏览器窗口)来引用,top.frame[0]

此外还有一个window对象是parent对象,它始终指向当前框架的直接上层框架

self对象始终指向window,实际上,self和window对象可以互换使用

窗口

确定窗口位置的方法:

  • window.screenLeftwindow.screenTop表示窗口相对于屏幕左边和上边的位置,适用于IE,Safari,Opera和Chrome
  • window.ScreenXwindow.ScreenY提供相同的窗口位置信息,适用于Safari,Opera和Firefox

由于浏览器不一致,无法精准计算窗口位置

确定窗口大小的方法:

  • innnerWidth,innerHeight表示该容器中页面视图区的大小(减去边框宽度)
  • outerWidth,outerHeight返回浏览器窗口本身的尺寸,但在Opera中,这两个属性表示页面视图容器的大小.

ps:在chrome中,这四个属性都返回相同的值,即都为视口大小而非浏览器窗口大小

获取视口大小的方法:

  • document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视口的信息
  • document.body.clientWidth和document.body.clientHeight获取相同信息(ie6中混杂模式使用)

导航和打开窗口

window.open(url,窗口目标,一个特性字符串,一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)

第二个参数选择窗口或框架的名称,就会在该窗口或框架加载指定url

第三个参数是一个逗号分隔的设置字符串,表示显示特性

image-20201214095301853

间歇调用和超时调用

  • setTimeout(要执行的代码建议回调函数,等待的时间),经过该时间后指定的代码不一定会执行,而是会被添加仅任务队列,如果队列是空的,就会立刻执行,该方法会返回一个超时调用的数字ID,可以用它取消超时调用,使用clearTimeout()方法并将超时调用ID传给它即可
  • setInterval(),它会按照指定的时间间隔重复执行代码,该方法同样返回一个间歇调用ID,使用clearInterval()并传入间歇调用ID即可取消

location对象

location对象提供了与当前窗口中加载的文档有关的信息,并将URL解析成独立的片段,还提供了一些导航功能,而且它即使window对象的属性,也是document对象的属性

image-20201214103534129

  • location.search(),可以通过substring()和split()等方法进行切割,返回每个参数
  • location.assign(),可以立即打开新URL并在浏览器的历史记录中生成一条记录
  • location.replace(),导航到对于URL页面,但不会生成历史记录
  • location.reload(),重新加载当前显示的页面

识别客户端浏览器的事实标准

navigator.plugins来检测插件

此外还有screen对象和history对象就不说了

原文地址:https://www.cnblogs.com/dwfeng/p/14132219.html