正如我们所知道的，javascript分为三大块，ECMAscript，BOM，DOM，ECMAscript固然重要；可是在web中使用ECMAscript很大程度上需要了解BOM即浏览器对象模型，否则ECMAscript就虎落平阳，毫无发挥之处，下面正式介绍BON。

1、window对象

window对象是BOM的核心，表示浏览器的一个实例；window对象有双重角色，即使通过js访问浏览器窗口的接口，又是ES规定的global对象。

1.1全局作用域

所有在全局作用域下声明的变量、函数都变成window的对象和方法

     var age=10

     console.log(window.age)    //

     console.log(age)           //

1.2窗口关系及框架

页面中包含框架则每个框架都有自己的window对象；并保存在frame是集合中，通过索引（从上到下，从左到右）或者框架名称访问相应的window对象，每个window对象都有个name属性，为框架名称

   <html>

       <head>

          <title>frameset example</title>

       </head>

       <frameset>

            <frame src="frame.htm" name="topframe">

            <frameset>

                <frame src="anotherframe.htm" name="lefeframe">

                <frame src="yetanotherframe.htm" name="rightname">

            </frameset>

       </frameset>

   </html>

上述代码：一个框架为上，两个框架为下，可以这样访问

    window.frames[0]

    window.frames["topframe"]

    top.frames[0]

    top.frames["topframe"]

    frames[0]

    frames["topframe"]

注意：

top对象始终指向的是最外层的框架即浏览器窗口，所以都可以用top来表示访问。

parent对象始终指向当前框架的直接上层框架（某一个框架内又包括其他的框架），某些情况等于top，没有框架时就是top，都是window对象。

self对象始终指向window对象，可以互换（只是为了对应起来）

1.3窗口位置

   var leftpos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;

   var toppos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;

一般跨浏览器获取window的窗口位置

1.4导航和打开窗口

使用window.open即可，一般有四个参数：加载的URL；窗口目标；特性的字符串；新页面是否取代浏览器历史记录中加载页面的布尔值

第二个参数：窗口目标一般用框架地址或者是（_self；_parent；_top；_blank）

第三个参数：一些特性，比如height  width  left 等等

    document.getElementById("start").onclick=function(){

            newwindow=window.open("http://id.qq.com/login/ptlogin.html","_blank","height=400,width=400,top=10,left=10,resizable=yes");

            newwindow.opener=null             //两个标签页可以在独立的进程中运行

    }

    document.getElementById("close").onclick=function(){

            newwindow.close()                 //可以关闭

    }

由于弹出窗口的设置，一些广告就随之而来，浏览器内置弹出窗口遮蔽程序，如何检测这类工具呢？

    var block=false

    try{

        var weixin=window.open("http://www.baidu.com","_blank")

        if(weixin==null){

            block=true

        }

    }catch(ex){

         block=true

    }

    if(block){

         alert("被拦截了")

    }

检测调用window.open打开的窗口是否被遮蔽了，并不会阻止浏览器与被遮蔽的弹出窗口有关的消息

1.4间歇调用和超时调用

大家都知道，js是单线程语言，但是允许设置超时值和间歇时间值来调度在特定的时刻执行，setTimeout和setInterval，前者是指定时间后执行，后者是每个指定时间执行；

拿setTimeout来说；接受两个参数；第一个为函数（可以用字符串不建议），第二个为等待的毫秒数；

js解析器会将执行的代码添加到队列中按顺序执行，而setTimeout会告诉多长时间后将其纳入队列

调用setTimeout()方法返回一个数值ID表示超时调用，这个ID是计划执行代码的唯一标识符，可以用它取消超时调用；超时调用为1，间歇调用为2

    var timer=setTimeout(function(){

         console.log("hello world")

    },1500)

间歇调用跟超时调用差不多，来个例子

    var num=0;

    var max=6;

    function change(){

        num++

        console.log("hello world")

        if(num==max){

            clearInterval(timer)

            alert("end")

        }

    }

    var timer=setInterval(change,1000)

1.5系统对话框

警告；提示；确认三种对话框，

alert()大家都熟悉了

confirm()返回的布尔值，所以说可以后续的操作

prompt()用于提示用户信息

   alert("这是一个警告框")

   var confirms=confirm("要不要确认啊")             //返回一个布尔值

   var prompts=prompt("你叫什么名字啊","张三")       //返回文本作用域的值

   if(confirms){

           console.log("great! you are smart")

   }else{

           console.log("you are bad ")

   }

    if(prompts==null){

        console.log("null")

    }else{

        console.log("not null")

    }
    window.print()    //打印对话框

    window.find()     //查找对话框

2、location对象

提供与当前窗口加载的文档有关的信息，既是window对象的属性，又是document对象的属性

1提供文档的有关信息

2将URL解析为独立片段，使开发人员通过不同的属性访问这些片段

location有以下属性：

hash   返回URL中hash(#号后跟零个或多个字符)

host    返回服务器名称和端口号

hostname   返回不带端口号的服务器名称

href     返回当前加载页面完整的URL   location对象的toString方法也返回其

pathname   返回URL中的目录或文件名

port    返回URL中指定的端口号

protocol   返回页面使用的协议

search  返回URL的查询字符串

下面以百度贴吧为例来看看具体情况

        location.hash    //#后面的内容

        ""

        location.href

        "http://tieba.baidu.com/show/zhanqi/roomList?tag_id=6"

        location.host    //服务器名称和端口号

        "tieba.baidu.com"

        location.hostname   //服务器名称

        "tieba.baidu.com"

        location.pathname   //URL中的目录或文件名

        "/show/zhanqi/roomList"

        location.port    //端口

        ""

        location.protocol  //页面使用协议

        "http:"

        location.search   //URL的查询字符串

        "?tag_id=6"

位置操作

改变浏览器的位置一般用location.href("")；改变URL就直接的设置其他的属性可以了

当改变URL后，浏览器会生成新的历史记录，浏览器后退键是可以返回的，禁用这种返回可以使用replace方法

    setTimeout(function(){

         location.replace("http://www.baidu.com")

    },1000)

location.reload 重新加载当前显示的页面；强制从服务器加载则传递参数true即可

3、navigator对象

识别客户端浏览器的事实上的标准，每个浏览器的navigator对象都有自己的一套标准

一些属性

appCodeName     浏览器名称(Mozilla)

userAgent             用户代理字符串

等等许多

检测插件

name插件的名字；description插件的描述；filename插件的文件名；length插件所处理的MIME类型数量，非IE浏览器则用plugins数组；兼容性的办法解决

    //非IE浏览器

    function hasPlugin(name){

         name=name.toLowerCase()

         for(var i=0;i<navigator.plugins.length;i++){

                 if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){

                       return true

                 }

         }

         return false

    }

    //IE浏览器

    function hasIEPlugin(name){

         try{

              new ActiveXObject(name)

              return true

         }catch(ex){

              return false

         }

    }

    function hasFlash(){

          var result=hasPlugin("Flash")

          if(!result){

                result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash")

          }

          return result

    }

    function hasQuickTime(){

          var result=hasPlugin("QuickTime")

          if(!result){

                 result=hasIEPlugin("QuickTime.QuickTime")

          }

          return result

    }

    alert(hasFlash())

    alert(hasQuickTime())

注册处理程序

让一个站点指明它可以处理特定类型的信息

4、history对象

保存用户上网的历史记录，从网页打开算起；使用go方法在用户的历史记录中任意跳转。

当然还有个length属性，检测用户一打开就是你的页面即首页

    var start=document.getElementById("start")

    var close=document.getElementById("close")

    start.onclick=function(){

        history.go(-1)           //向后一页   history.back()

    }

    close.onclick=function(){

        history.go(1)            //向前一页   history.forward()

    }

还有screen对象，浏览器窗口外部显示器信息，没多大用，屏幕对象，有width，height等属性

jsBOM内容的更多相关文章

  1. 前端开发 - jsBom

    一.jsBom简介 jsBom = javascript browser object modelBOM指的是浏览器对象模型 Browser Object Model,它的核心就是浏览器. 二.Bom ...

  2. 防御XSS攻击-encode用户输入内容的重要性

    一.开场先科普下XSS 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶 ...

  3. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  4. 阿里巴巴直播内容风险防控中的AI力量

    直播作为近来新兴的互动形态和今年阿里巴巴双十一的一大亮点,其内容风险监控是一个全新的课题,技术的挑战非常大,管控难点主要包括业界缺乏成熟方案和标准.主播行为.直播内容不可控.峰值期间数千路高并发处理. ...

  5. Linux中进行单文件内容的复制

    文件内容复制的常规方法: 开辟一段空间,不断读取文件的内容并写入另一文件当中,这种方法好在安全,一般在类型允许的最大范围内是安全的,缺点就是复制内容的时间长 一次性复制文件的内容,这种方法必须首先获取 ...

  6. HTML5 语义元素(二)文本内容

    上一篇介绍的是关于页面结构方面的语义元素,本篇介绍文本内容方面,包含:<bdi>.<details>.<summary>.<mark>.<outp ...

  7. iOS 委托与文本输入（内容根据iOS编程编写）

    文本框(UITextField) 本章节继续编辑 JXHypnoNerd .文件地址 . 首先我们继续编辑  JXHypnosisViewController.m 修改  loadView 方法,向  ...

  8. 游戏AI系列内容 咋样才能做个有意思的AI呢

    游戏AI系列内容 咋样才能做个有意思的AI呢 写在前面的话 怪物AI怎么才能做的比较有意思.其实这个命题有点大,我作为一个仅仅进入游戏行业两年接触怪物AI还不到一年的程序员来说,来谈这个话题,我想我是 ...

  9. angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布

    应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...

随机推荐

  1. <魔域>按键精灵脚本

    用了三天时间才写完,实现了通过图片识别读取坐标数值,自动寻路等简单功能. 主要的难点在于游戏中的坐标系,和电脑屏幕的坐标系存在三维旋转关系,难以换算. //全局变量:第一个数左上右下坐标 Global ...

  2. Mac 安装 Gradle

    首先下载 Gradle 通过官网进行下载 https://gradle.org 下载的文件名可能是 gradle-3.3-bin.zip 解压 将此文件解压到任意位置,如解压到 /usr/local ...

  3. JavaScript判断对象类型及节点类型、节点名称和节点值

    一.JavaScript判断对象类型 1.可以使用typeof函数判断对象类型 function checkObject1(){ var str="str"; console.lo ...

  4. JavaSE（四）之接口、访问控制

    上面我们学习了几个修饰符,在开发中经常会用的到,所以必须熟练的掌握.接下来我学习一下接口和访问控制. 一.接口 一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方 ...

  5. CTF---密码学入门第五题 传统知识+古典密码

    传统知识+古典密码分值:10 来源: 霜羽 难度:易 参与人数:2297人 Get Flag:735人 答题人数:938人 解题通过率:78% 小明某一天收到一封密信,信中写了几个不同的年份     ...

  6. 【BZOJ】初级水题列表——献给那些想要进军BZOJ的OIers(自用，怕荒废了最后的六月考试月，刷刷水题，水水更健康)

    BZOJ初级水题列表——献给那些想要进军BZOJ的OIers 代码长度解释一切! 注:以下代码描述均为C++ RunID User Problem Result Memory Time Code_Le ...

  7. [国嵌攻略][173][BOA嵌入式服务器移植]

    1.解压boa嵌入式web服务 tar zxvf boa-0.94.13.tar.gz 2.进入src目录生成配置文件 ./configure 3.修改生成的Makefile CC=arm-linux ...

  8. 如何初始化grunt

    为什么使用任务运行工具Grunt -- 官方解释 简而言之,自动化.当你处理诸如代码最小化, 代码编译, 单元测试, 代码规范校验等等重复任务时, 你必须要做的工作越少,你的工作就变得越简单.在你完成 ...

  9. SpringMVC Hello(IDEA)

    以前一想要学习Java相关知识的时候,就会认为.NET FrameWork的相关技术还没学个通透还夹生饭.现在感觉只会.NET有些单一,需要多掌握几种开发技术,尽管.NET还没达到精通.貌似Hello ...

  10. SQL Server中字段类型对应的C#中的数据类型

      数据库  C#程序  int                int32  text string bigint int64 binary System.Byte[] bit Boolean cha ...