JS之BOM

Posted 2020-09-18 yxysuanfa

           JS语言是BS开发中负责页面动态效果的一种脚本语言，既然如此，自然少不了有关浏览器页面的知识，BOM：浏览器对象模型，涉及到有关JS中操作浏览器页面的一些基本知识。在这里最核心的对象就是window。它包括六大属性，当中这些属性本身也是对象。

通过图中。能够看出来，在window中我们最经常使用的就是window中的document对象即DOM（后面单独总结）。这里仅简单的总结一下有关window对象中的相关方法和使用。

 一、系统对话框

      此方法主要用于与用户交互。起到一个提示用户的作用。在BOM弹出窗体中。主要涉及到三个：

      alert():相当于vb中的msgbox()的最简单形式，被经经常使用于JS中进行測试。

      prompt():输入提示框，类似于inputbox

      confirm():确定和取消，msgbox也能够实现此功能

二、位置和大小

    主要指获取窗体的一个大小和位置。此处须要与DOM中的元素的位置和大小进行区分。

  1、大小 ：用来获取浏览器窗体大小

 非IE：

        innerWidth/Height:不包含菜单条，工具栏和边框的大小。仅仅是页面显示部分的大小。

        outerWidth/Height：整个窗体的当前的尺寸，包含菜单条、工具栏和边框。

IE：可利用clientWidth/Height来获取元素的实际大小。这里和DOM中获取元素的大小有非常多关联的地方，后面总结。

   2、位置：获取浏览器当前位置。距离左边和顶端的距离。

    非IE:screenLeft/Top

        IE：screenX/Y

这些是最主要的获取窗体的位置和大小的表示，能够和DOM中获取元素尺寸和位置来进行区分比較。一般会在设置元素居中显示时用到，在使用时，要涉及到各个浏览器的兼容问题，另外还可利用moveTo(,),moveBy(,)resizeTo(,) resizeBy()对元素进行移动等。

三、经常用法

         JS是单线程语言。不支持多线程，因此，它提供了两种方法专门儿用于延迟载入和间歇调用

       1、超时调用

         setTimeout(运行的方法。延迟的时间) //含有括号里的两个參数

        哪里能够用得到呢？

        实战：JS中的粘贴（paste）触发事件发生在粘贴到目标区域之前，那么假设想要在粘贴事件之后触发想要运行的方法。此时，我们就能够用到延迟载入来实现此功能。

		var box=function(){setTimeout(alert(‘粘贴成功。‘), 50)}; //默认单位毫秒，事件绑定代码略

  此方法默认返回一个ID值，JS还提供了 clearTimeout()方法可用于取消超市调用，使用时。仅仅需将须要取消方法的ID（返回值）赋给clearTimeout作为參数就可以。                     

 clearTimeout(box);

      2、间歇调用

     setInterval(运行的方法，间歇时间)，使用方法同上。同一时候可利用clearInterval()来取消间歇调用。

     3、操作父窗体

     在使用浏览器时，会常常遇到在弹出子窗体中去触发父窗体的情况，JS中open（）方法用来打开一个新的子窗体，同一时候，默认父窗体的标识为opener,可在子窗体中加入事件。来触发父窗体对应。

document.onclick = function () {
    opener.document.write(‘子窗体让我输出的。‘);
}

总结：以上是有关window对象中最经常使用到的一些基础。在学习这一部分时，要避免与DOM中的一些知识混淆比方获取元素尺寸和大小等。

由于二者非常多属性是能够共用的。比方：location能够获取当前URL。具有导航功能。能够进行页面跳转，此为BOM中的其他对象在寻常我们使用浏览器时便经常常使用到，比方history对象用来查看历史信息等。