zoukankan      html  css  js  c++  java
  • 重操JS旧业第十一弹:BOM对象

    BOM对象即浏览器内置对象,现今流行的浏览器内核有Safri,Firefox,Chrome,Opera,IE其中IE的兼容性是最蛋疼的在10及其过后还好点,但是现在IE基本上淘汰,而国内像360这种垃圾玩意儿包了个IE壳导出吹

    真是不像样子,也不要脸。

    BOM对象在不同内核的浏览器,有很多兼容性问题,比如一些属性上等等,以及后面说的Dom更是很多差别。

     

    1 全局作用域

    window在SPA,单页面应用程序里面处于整个BOM树最顶端,也就是全局作用域的大哥,所有的对象都直接间接的寄宿在window对象下

    var obj='dddd';与window.obj='ddd';的不同在于var申明(注意js中申明也就是定义)的变量不能被delete删除掉,即删除的结果返回false,因为这样申明的变量配置为不可删除的特性为true;而window.obj则相反

    delete obj  ->false;

    delete window.obj -->true;

    2 window对象树

    为什么这么说,因为有了frameset的引入,一个web页面可能有很多子页面通过frame的方式组合成一张页面,那么这个时候window自然已经不是最顶层的对象了,响应的这些子window对象都由一个叫top对象管理着,自然的top对象才是真正的王者,在他下面管理着一个frames数组,我们的页面框架就放置在这个数组里面,如果想要访问某个frame可以使用top.frames[0]或者top.frames[name]来访问,由于window成为window树中一名成员,window通过parent也可以访问上级frame对象,所以访问具有多条路径

    top.frames[0];top.frames[name],也可以不适用top前缀,frames[0],也可以使用window.parent层层查找,而每个frame对象具有name属性

     

    3 窗口位置

    什么是窗口,也就是我们通常见到的一个web页面,也就对应一个window,这个window可能是SPA,也可以是通过frames嵌入的;

    窗口位置:即窗口左上角与屏幕左上角的偏移距离;通常在大多数浏览器里面使用window.screenLeft,window.screenTop来访问,而在forefox里面使用window.screenX,window.screenY来访问;

     

    4 窗口大小

    由于web页面具有边框这个玩意儿,便有了outerWidth,outerHeight和innerWidth,innerHeight两种方式来认为就是窗口大小,outer当然代表了整个浏览器最外层的大小,而inner则代表了真是显示内容的区域

    即视口,就是我们看到的浏览器内容窗口大小,这个与document.doucumentElement.clientWidth,document.doucumentElement.clientHeigth相对应也就是所谓的视口大小,视口大小可能随时变化,而在移动

    端document.body.clientWidth,document.body.clientHeigth才代表真正渲染后的视口大小,而document.doucumentElement.clientWidth,document.doucumentElement.clientHeigth代表布局大小;

     

    5 导航

    window.open:打开新的页面,这个页面可能被浏览器阻止,导致返回值为null

    6 setTimeout,setInterval

    2个老朋友了就不多说了

     

    7 系统对话框

    aler:

    confirm,prompt:基本废物一个

    8 location对象

    即浏览器地址栏对象,这个对象具有url多个分解后的属性,如host

    9 navigator对象

    用途呢:主要用来检测浏览器插件和浏览器的属性介绍,或者浏览器订阅rss这类的,很少使用

    10 history和screen对象

    history:go(-1);go(1)很简单不多说了

    screen对象几乎没人使用咯

     

  • 相关阅读:
    启动VMware出现报错:The VMware Authorization Service is not running
    CentOS8安装SQLServer2019
    CentOS8安装Tomcat
    CentOS8安装java环境
    手把手0基础Centos下安装与部署paddleOcr 教程
    redis反向代理docker容器中的rabbit mq服务
    MQTT 4 ——MQTT的Spring Mvc 配置接收字节流数据
    MQTT 3 ——MQTT与Spring Mvc整合
    MQTT 2——服务端安装与客户端测试
    MQTT 1——物联网集成项目技术选型与说明
  • 原文地址:https://www.cnblogs.com/rjjs/p/5900339.html
Copyright © 2011-2022 走看看