BOM

浏览器对象模型
BM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏宽器的操作
B0M对象
- Window
  - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
  - 其他对象都是该对象的属性，其他对象可以直接获取，也可以通过window对象获取
- Navigator
  - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
- Location
  - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
- History
  - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录；
  - 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页。而且干操作只在当次访问时有效
- Screenl
  - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息。

Navigator

代表的当前器的信息,通过该对象可以来识别不同的览器
由于历史原因, Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用 userAgent家判断浏览器的信息

hbuilder内置浏览器的userAgent信息：
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 HBuilderX

火狐浏览器的userAgent信息：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Chrome浏览器的userAgent信息：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

IE11
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Zoom 3.6.0; rv:11.0) like Gecko
在IE11中已经将微软和IE相关的表示都丢掉了，所以不能通过userAgent属性来识别一个浏览器是否是IE了。

IE8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Zoom 3.6.0)

<script>var nav = window.navigator;// console.log(nav.userAgent);var ua = nav.userAgent;if(/Firefox/i.test(ua)){alert("你是火狐")}else if(/Chrome/i.test(ua)){alert("你是Chrome")}else if (/MSIE/i.test(ua)){alert("你是IE浏览器")}else if("ActiveXobject" in window){alert("你是IE浏览器，而且是IE11，抓住你了~~~")}
</script>

History

属性	说明
length	返回历史列表中的网址数

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

a、back() – forward()

可以用来回退到上一个页面，作用和浏览器的回退按钮一样

<button>按钮</button>
<script>var btn = document.getElementsByTagName("button")[0];var history = window.history;btn.onclick = function() {// history.back();// history.forward()}
</script>

b、go()

可以用来跳转到指定的页面；

需要一个整数作为参数

1：表示向前跳转一个页面
2：表示向前跳转两个页面
…
-1：表示向后跳转一个页面
-2：表示向后跳转两个页面
…

<button>按钮</button>
<script>var btn = document.getElementsByTagName("button")[0];var history = window.history;btn.onclick = function() {history.go(4)}
</script>

Location

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

查看属性：
var btn = document.getElementsByTagName("button")[0];
var loca = window.location;
btn.onclick = function() {console.log(loca.href);console.log(loca);
}
如果直接将location属性修改为一个完整的路径或相对路径，则页面会自动跳转到该路径，冰球会生成相应的历史记录。
window.location = "https://www.baidu.com/";

方法：

a、assign()

用来跳转到其他页面，作用和直接修改locating一样

window.location.assign("https://www.baidu.com/")

b、reload()

用于重新加载当前页面，作用和刷新按钮一样

如果在方法中传递一个true 作为参数，则会强制清空缓存刷新页面。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

window.location.reload(true)

c、replace()

可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，

但是不会生成历史记录，不能使用回退按钮回退页面

window.location.replace("https://www.baidu.com/")

定时器

定时器方法是window的方法，可以使用window获取到。

方法	描述
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

a、间隔调用

var count=0;
// 该方法会返回一个唯一的定时器标识
// 参数有两个：
//      1、回调函数
//      2、调用回调函数的间隔，以毫秒为单位
var timer = setInterval(function(){document.write(count++);
},1000)
btu.onclick = function() {// clearInterval()方法可以用来关闭一个定时器，但是要传入一个定时器的标识作为参数clearInterval(timer);
}

b、超时调用

var btn = document.getElementsByTagName("button")[0];
// 该方法会返回一个唯一的定时器标识
// 参数有两个：
//      1、回调函数
//      2、调用回调函数的间隔，以毫秒为单位
// setTimeout()
var timer = setTimeout(function() {alert("被调用了");
}, 1000)
btu.onclick = function() {// clearTimeout()方法可以用来关闭一个定时器，但是要传入一个定时器的标识作为参数clearTimeout(timer);
}

浏览器对象模型BOM学习相关推荐

浏览器对象模型BOM
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器的JavaScript扩展都纳入BOM的范畴.BOM提供了一组独立于网页内容而 ...
js笔记（四）内置对象Math和Date()、浏览器对象模型BOM
大标题小标题备注一.内置对象Math.Date() 1. Math 数学对象; 2. Date() 日期对象; 常用的数学对象:Math.PI.abs(n).round(n).random(). ...
浏览器对象模型bom的作用是什么？
浏览器对象模型bom的作用是什么? 零.总结 1.BOM提供了独立于内容而与浏览器窗口进行交互的对象 2.BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和 ...
JavaScript浏览器对象模型BOM
JavaScript浏览器对象模型BOM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
浏览器对象模型(BOM)
BOM结构用户浏览网页的时候,浏览器会自动创建一些对象,这些对象存放着浏览器窗口的属性和相关信息,也就是大家熟称的BOM.浏览器对象模型是一个层次化的对象集,我们可以通过window对象访问所有对象 ...
什么是BOM BOM概述浏览器对象模型 BOM的构成
什么是BOM BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window: BOM是由一些列相关对象构成,并且每个对象 ...
浏览器对象模型 (BOM)
浏览器目前主流的浏览器分这么几种: IE 6~11:国内用得最多的IE浏览器,历来对W3C标准支持差.从IE10开始支持ES6标准: Chrome:Google出品的基于Webkit内核浏览器,内置 ...
前端之浏览器对象模型(BOM)
1.BOM 概念: BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗 ...
JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

浏览器对象模型BOM学习

BOM

Navigator

History

Location

定时器

浏览器对象模型BOM学习相关推荐

最新文章

热门文章