Bom及Bom对象的详细介绍

一. 什么是BOM:

BOM学名: Browser Object Model 翻译为浏览器对象模型。其实就是专门操作浏览器窗口的一组对象和函数
如果想操作浏览器窗口或访问浏览器软件的信息，就用BOM。比如: 打开和关闭窗口，鉴别浏览器名称和版本号等
问题: BOM没有标准，有严重的兼容性问题。
包括以下主要对象: window; history; location; navigator; document; screen; event

二. window对象

三个角色:

代替ECMAScript中的global充当全局作用域对象var a=3; 结果变量a会保存在window中。parseInt，其实也可以是window.parseInt
包含所有DOM，BOM的原生函数和对象。 document对象，其实保存在window.document。alert()其实是window.alert()
代表当前窗口——可获得当前窗口的大小： 2组：
1)：完整窗口大小: outerWidth和outerHeight
2)：文档显示区窗口大小: innerWidth,innerHeight
3)：文档显示区: 浏览器中专门显示网页的那部分白色区域
4)：可以打开和关闭窗口
window.open() 可打开一个新窗口
window.close() 可关闭一个窗口

三. 打开窗口:

在当前窗口打开新链接，可后退:
(1). html中: <a href="url" target="_self">
(2). js中: window.open("url", "_self")
在当前窗口打开新链接，禁止后退:
(1). 只能用js做: location.replace(“新url”)
在新窗口打开新链接，可打开多个:
(1). html中: <a href="url" target="_blank">
(2). js中: window.open("url", "_blank")
在新窗口打开新链接，只能打开一个:
(1). html中: <a href="url" target="blank">
(2). js中: window.open("url", "blank")
原理：
其实浏览器中每个窗口在内存中都有一个唯一的名称
浏览器规定，相同名称的窗口，只能出现一个。后出现的窗口会把先出现的窗口覆盖掉。
在打开窗口跳转页面时，可以给新窗口指定不同窗口名，实现不同的打开窗口的效果。其实a元素的target属性值，就是要给新窗口的名称。
window.open()的第二个参数值，也是要给新窗口的名称
新窗口中可用window.name属性接住上个页面传过来的窗口名。window.name属性是BOM内置的关键词，所以我们自己起变量名时，不要用"name"。
可实现以下三种效果:
1. 在新窗口打开新链接，只能打开一个
  <a href="url" target="自定义新窗口名">
  window.open("url", "自定义新窗口名" )
2. 在新窗口打开新链接，可打开多个:
  <a href="url" target="_blank">
  window.open("url", "_blank" )
  因为_blank是内置窗口名，表示不指定窗口名，而是让浏览器随机分配窗口名(看不见)。之后打开的窗口名，没有重复，所以可以打开多个窗口。
3. 在当前窗口打开，可后退:
  <a href="url" target="_self">
  window.open("url", "_self" )
  因为_self也是内置窗口名，表示用当前窗口自己的名称作为新窗口的名称，结果，新窗口会覆盖当前窗口

四. history:

什么是: 当前窗口内存中保存当前窗口打开后，成功访问过得url的历史记录数组。
掌管着前进和后退:
(1). 当当前窗口打开一个新地址后，就会将新地址push()到history中。
(2). 默认浏览器始终显示最新的url
(3). 能否前进或后退，取决于浏览器正在显示哪一条url的网页，以及这条url历史记录前后，是否有其他历史url存在。如果有，就可以前进或后退
如何用程序前进后退:
(1). history.go(1) 前进1步
(2). history.go(-1) 后退1步，如果后端一步不管用，可history.go(-2)
(3). history.go(0) 刷新

五. location

什么是: 保存地址栏中地址信息，并提供跳转函数的对象
何时: 只要希望获得url中的信息，或执行页面跳转或刷新功能时
如何使用:
(1). 属性:
1 location.href 完整的url
2 location.protocol 协议
3 location.host 主机名+端口号
4 location.hostname 主机名
5 location.port 端口号
6 location.pathname 相对路径
7 location.search ?及其之后的查询字符串
8 location.hash 锚点地址
(2). 方法:
1 在当前窗口打开，可后退:
loction.href="新url" 立刻跳转，也可以: location="新url" 或 location.assign("新url")
2 在当前窗口打开，禁止后退:
location.replace("新url")
3 刷新页面: 2种:
1). 普通刷新: 优先从浏览器本地缓存中获取资源。除非本地缓存中的资源不存在或过期，才从服务器下载新资源
history.go(0) 和 location.reload()
2). 强制刷新: 无论缓存中是否有需要的资源文件，都要重新从服务器下载资源。
location.reload(true) //强迫

六. navigator

navigator是保存浏览器配置信息的对象
何时使用: 查看浏览器软件的配置信息，判断浏览器的名称和版本号。
(1). navigator.userAgent: 保存浏览器名称和版本号的字符串
(2). 如何根据userAgent判断当前浏览器的名称和版本号(我上篇文章说过了)

有问题欢迎交流，个人博客

Bom及Bom对象的详细介绍相关推荐

Java中创建对象的六个步骤细分后（new关键字）对象头详细介绍
要看的懂对象的创建过程,首先你得有对Java虚拟机和Java基础以及JUC很是熟悉, 比如类的加载过程.CAS.多线程.JVM的GC等等文章目录一.创建对象的六个步骤: 二.对象头的内部结构首先 ...
BOM之navigator对象和用户代理检测
前面的话 navigator对象现在已经成为识别客户端浏览器的事实标准,navigator对象是所有支持javascript的浏览器所共有的.本文将详细介绍navigator对象和用户代理检测属性 ...
JavaScript函数和BOM及DOM编程（详细总结-无尿点）
JavaScript函数和BOM及DOM编程(详细总结-无尿点) javascript 函数一.javascript函数 1.1 概述 1.2 常见的系统函数 1.2.1 eval 1.2.2 pa ...
java intent bundle_Android 通过Intent使用Bundle传递对象详细介绍
Android 通过Intent使用Bundle传递对象 Android开发中有时需要在应用中或进程间传递对象,下面详细介绍Intent使用Bundle传递对象的方法. 被传递的对象需要先实现序列化, ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
laravel log 对象_swoole运行模式加速laravel应用的详细介绍（life）
本篇文章给大家带来的内容是关于swoole运行模式加速laravel应用的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我的官方群点击此处. 一.Swoole Swoole ...
java final对象_java面向对象基础_final详细介绍
一.final关键字 1.final修饰的成员变量,其实就是常量 public class Example01 { public final String userName="小李" ...
DOM windows对象 navigator对象详细介绍
目录 BOM Window对象是什么全局作用域 Window对象的属性 window对象与self属性 Window对象的方法用户的浏览器产品今日金句今日心情 BOM Window对象是什么 ...
Wscript.Shell 对象详细介绍！！
系列文章分类 C#专栏.VBS专栏.JAVA 专栏.IDEA 专栏 Wscript.Shell 对象详细介绍!! 前言一. WshShell 对象有关的属性. 二. WshShell 对象有关的方法 ...
bom event周期_MRP运行五大步骤逻辑详解（含动态安全库存、安全时间、批量计算方法、BOM表扩展方法的详细说明）...
MRP运行五大步骤逻辑详解(含动态安全库存.安全时间.批量计算方法.BOM表扩展方法的详细说明) 作者:袁云飞(AlbertYuan)- 微信号yuanalbert 以下内容均为原创,希望对初学者有一 ...

Bom及Bom对象的详细介绍

一. 什么是BOM:

二. window对象

三. 打开窗口:

四. history:

五. location

六. navigator

Bom及Bom对象的详细介绍相关推荐

最新文章

热门文章