JavaScript 浏览器对象模型BOM原理与常见用法实例分析

本文实例讲述了JavaScript 浏览器对象模型BOM原理与常见用法。分享给大家供大家参考，具体如下：

什么是BOM

BOM：Browser Object Model，浏览器对象模型

从上图也可以看出：

  • window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
  • DOM是BOM的一部分。

window对象：

  • window对象是JavaScript中的顶级对象。
  • 全局变量、自定义函数也是window对象的属性和方法。
  • window对象下的属性和方法调用时，可以省略window。

弹出系统对话框

比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。

系统对话框有三种：

alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用

打开窗口、关闭窗口

打开窗口

window.open(url,target)

参数解释：

  • url：要打开的地址。
  • target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <!--行间的js中的open() window不能省略-->
  <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
  <button>打开百度</button>
  <button onclick="window.close()">关闭</button>
  <button>关闭</button>
 </body>
 <script type="text/javascript">
  var oBtn = document.getElementsByTagName('button')[1];
  var closeBtn = document.getElementsByTagName('button')[3];
  oBtn.onclick = function(){
      //open('https://www.baidu.com')
   //打开空白页面
   open('about:blank',"_self")
  }
  closeBtn.onclick = function(){
   if(confirm("是否关闭？")){
    close();
   }
  }
 </script>
</html>
<body>
<!--BOM使用的是window.开头的语句-->
<!--history模式和 hash模式-->
<!--history模式： xxxx/#/index.html-->
<!--hash模式：xxxx/index.html-->
<button id="btn">跳转</button>
<script>
 var oBtn=document.getElementById('btn');
 oBtn.onclick=function(){
  console.log(location);
  //打开百度，下面三种方式皆可
  // location.href='http://www.baidu.com';
  // open('http://www.baidu.com','_self');
  window.open('http://www.baidu.com','_self');//在当前页面打开
  window.location.reload();//刷新或者叫重载
 }
</script>
</body>

location对象

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

location对象的属性

  • href：跳转
  • hash 返回url中#后面的内容，包含#
  • host 主机名，包括端口
  • hostname 主机名
  • pathname url中的路径部分
  • protocol 协议 一般是http、https
  • search 查询字符串

举例：5秒后自动跳转到百度。

有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location

<script>
 setTimeout(function () {
  location.href = "http://www.baidu.com";
 }, 5000);
</script>

location.reload():重新加载,这个加载是  全局刷新，让整个文档重新解析了一遍，一般不建议使用

setTimeout(function(){
   //3秒之后让网页整个刷新
 window.location.reload();
},3000)

navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

  • userAgent：系统，浏览器)
  • platform：浏览器支持的系统，win/mac/linux
console.log(navigator.userAgent);
console.log(navigator.platform);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述

    解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述

    DHTML:它不是一门新的语言,而是HTML.CSS和JavaScript这三者相结合的产物,DHTML包含如下3个含义:    (1)通过HTML把网页标记为各个元素    (2)利用CSS设计元素之间的排版样式,并控制各个标记的位置    (3)使用js来控制各个标记JavaScript由三部分组成: (1) ECMAScript是一种由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序设计语言.ECMAScript定义了脚本语言的所有特性.对象和方法,其他语言可以实现EC

  • javascript的BOM汇总

    setTimeout() //延时器,只执行一次代码 clearTimeout() //清除演示器 setIntervla() //定时器,根据指定时间间隔执行一次代码 clearInterval() //清除定时器 window.history.length //访问的历史页面的数目 window.history.forward() //前一页 window.history.back(); //后一页 window.history.go(-1); //跳转至曾经访问过的某个页面,负值表示向后跳

  • JavaScript中BOM对象原理与用法分析

    JavaScript中BOM对象原理与用法分析

    本文实例讲述了JavaScript中BOM对象原理与用法.分享给大家供大家参考,具体如下: 百度百科 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象. 我的理解 博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScrip

  • JS中BOM相关知识点总结(必看篇)

    JS中BOM相关知识点总结(必看篇)

    window对象 ECMAScript是JavaScript的核心,但是如果要在web中使用javascript,那么BOM(浏览器对象模型)才是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象:BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 因此,所有全局作用域中声明的变量.函数都会变成w

  • 深入学习JavaScript中的bom

    BOM(Broswer Object Model) 凡是 window 的属性和方法,均可以省略"window." 方法: 框窗 1.警告框 window.alert("msg"); 2.确认框 window.confirm("msg"); 3.询问框 window.prompt("msg","defaulvalue") 页面 1.打开一个窗口 window.open() 2.在子窗口中使用,表示父窗口的w

  • javascript的BOM

    javascript的BOM

    javascript的BOM ECMAScript是 JavaScript的核心,但如果要在 Web中使用 JavaScript,那么 BOM(浏览器对象模型)则无疑才是真正的核心.BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关.多年来,缺少事实上的规范导致 BOM既有意思又有问题,因为浏览器提供商会按照各自的想法随意去扩展它.于是,浏览器之间共有的对象就成为了事实上的标准.这些对象在浏览器中得以存在,很大程度上是由于它们提供了与浏览器的互操作性.W3C为了把浏览器中

  • javascript bom是什么及bom和dom的区别

    javascript bom是什么及bom和dom的区别

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 在BOM章节中你将学到什么 BOM教程中,同学们将学到与浏览器窗口交互的一些对

  • JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

  • JavaScript 浏览器对象模型BOM使用介绍

    JavaScript 浏览器对象模型BOM使用介绍

    BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准; 一 window对象 // BOM的核心对象是window,它表示浏览器的一个实例; // window对象处于JavaScript结构的最顶层; // 对于每个打开的窗口,系统都会自动为其定义window对象; // window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局

  • javascript中BOM基础知识总结

    一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window: BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分. 二.学习BOM学什么 我们将学到与浏览器窗口交互的一些对象,例如

  • JS中的BOM应用

    JS中的BOM应用

    我们曾经讲过JS由三部分组成,其中一个部分就是BOM,用于对浏览器进行操作.这节课我们主要就来介绍BOM. BOM基础 我们先来看一个BOM的最基础功能:打开.关闭窗口: <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value=&quo

随机推荐