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


Posted in Javascript onDecember 16, 2019

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

什么是BOM

BOM:Browser Object Model,浏览器对象模型

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

从上图也可以看出:

  • 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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
javascript自定义右键菜单插件
Dec 16 #Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 #Javascript
js实现数字滚动特效
Dec 16 #Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 #Javascript
js实现内置计时器
Dec 16 #Javascript
js实现秒表计时器
Dec 16 #Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 #Javascript
You might like
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
python爬虫爬取网页表格数据
2018/03/07 Python
python生成n个元素的全组合方法
2018/11/13 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
基于python图像处理API的使用示例
2020/04/03 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
详解python内置模块urllib
2020/09/09 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
python中@contextmanager实例用法
2021/02/07 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
介绍Ibatis的核心类
2013/11/18 面试题
英语演讲稿3分钟
2014/04/29 职场文书
施工安全标语
2014/06/07 职场文书
七夕情人节促销方案
2014/06/07 职场文书
迎新生标语大全
2014/10/06 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL