BOM浏览器对象模型

BOM浏览器对象模型

BOM概述

概述

浏览器对象模型，简称BOM，BOM提供了独立于内容而是与浏览器窗口进行交互的对象，BOM的核心是window对象，与ECMAScript不同的是，BOM针对的是浏览器，鉴于市面上的浏览器多种多样，因此会影响BOM的兼容性。

浏览器的兼容性

浏览器因为它的多厂商，导致兼容问题是不可忽略的，主流浏览器中的各个版本的兼容也不尽相同，因此，在BOM运行时可能会出现结果不同或者毫无结果的情况。

window对象

window的对象概念

window对象是BOM的核心对象，他除了可以使用全局对象的属性和方法之外，还可以执行浏览器的一些方法。

全局作用域

在全局作用域下创建的变量和函数都会成为window的属性和方法。

      var a = 10 ;
      console.log(window.a);

      function b(){
          return 'ni_hao';
      }

      console.log(window.b());

      //在全局下window可以省略

窗口大小

(1)视图的大小
可见内容视口相当于document.body的宽度和高度

       //视口相当于document.body的宽度和高度
       var w = document.body.clientWidth;
       var h = document.body.clientHeight;

       console.log(w + ',' + h);

(2)视口大小
浏览器的视口大小是包含左侧和

       //浏览器展现区域的宽高，包含滚动条所占区域
       var ww = window.innerHeight;
       var wh = window.innerWidth;

       console.log(ww+ ',' +wh);

(3)浏览器大小
整个浏览器在显示器上所占有的宽度和高度，包括浏览器的所以部分

窗口位置

浏览器左界面和上界面到操作系统桌面左上角的水平和垂直距离

open

window.open(‘需要打开的地址’,‘窗口打开方式’)；只是最简单的open参数，还可以增加其他内容。使用open打开的页面基本都可以用close关闭，但open和close有兼容性问题

    document.getElementById('a').onclick = function(){
          window.open('视口大小.html','_self');
          //_self  当前窗口打开
          //_blank 新窗口打开（默认）
      }

弹出框

      alert('提示弹出框');   //字符串
      confirm('选择弹出框');   //返回值是true/false
      prompt('输入弹出框')     //返回值是字符串内容

超时调用（一次性定时器）

setTimeout(回调函数,时间);也叫一次性定时器，创建这个定时器之后会在一定时间中调用函数，执行函数中的脚本

   setTimeout(function(){
            alert('shiyan');
        },2000);

间歇调用(循环定时器)

location对象

location对象的概念

window的location对象用于获取当前的页面的地址，并把浏览器重新定向到新的页面，在编写时可以不用加window1前缀。

查看location对象的常用属性

href 返回当前完整的URL地址
host 返回的是服务器名称和端口号
port 返回端口号
pathname 返回的是目录和文件名
search 返回的是参数，也就是？后面的内容
protocol 返回使用页面的协议，如http/https

navigator对象

概念

window的navigator对象包含关于浏览器的信息，在编辑的时候不能使用window这个前缀，直接使用navigator，该对象代表浏览器本身的名称，版本，系统等信息，但存在兼容问题，请慎用。

属性介绍

  console.log(navigator);

navigator.appName : 浏览器名称
navigator.appVersion : 浏览器的版本
navigator.user

判断浏览器类型

   if(navigator.userAgent.indexOf('MSIE')!=-1){
          console.log('IE浏览器');
      }else{
          console.log('非IE浏览器');
      }

screen对象

概念

screen对象表示一个屏幕的窗口，他会随着浏览器的不同，窗口大小的位置不同返回不同的值，前提是返回的是当前打开窗口的内容

属性

       console.log(screen);

history对象

history对象保存着从窗口被打开的历史记录。每个浏览器窗口，标签页，框架都有自己的history对象，为了保护用户隐私，对js访问该对象作出了一部分限制

    console.log(history);

常用方法

history.go(n) 整数 0代表刷新， 正数代表向前跳n步，负数代表向后跳n步
history.back(n);代表向后跳n步