JavaScript中的BOM: history-Location-Navigator

BOM(浏览器对象模型)

- BOM中为我们提供了一组对象，借助这组对象可以通过JS来操作浏览器

Window （代表整个浏览器窗口，全局对象）

Navigator （表示浏览器的信息）

Location （表示浏览器地址栏信息）

History （表示浏览器的历史记录）

Screen （表示用户的设备的屏幕信息）

- BOM对象都是window对象的属性，可以通过window对象访问，也可以直接访问

window.navigator

1:BOM: history-Location:

location 表示的是浏览器的地址栏信息

- 可以通过window.location 或 location来对其进行访问

- location用于获取或设置浏览器的地址栏

- 如果直接打印location可以获取到浏览器的地址栏信息

- 也可以对其进行修改，修改后浏览器将会跳转到修改后的地址

通过修改location跳转地址会产生历史记录

assign()

- 用来修改location的值，和直接修改location效果一样

replace()

- 使用新的页面替换当前页面，不会生成历史记录

reload()

- 刷新当前页面，相当于刷新按钮

reload(true)

- 强制清缓存刷新页面

History

- 表示浏览器的历史记录

- 可以通过window.history 或 history来对其进行访问

- 历史记录这种东西属于个人隐私，所以JS无法直接访问用户的历史记录

它只能用来控制浏览器向前向后翻页

history.forward()

- 用来切换到下一页，就相当于浏览器的向前按钮

history.back()

- 用来回退到上一页，相当于浏览器的回退按钮

history.go();

- 用来跳转到只能的记录

- 需要一个整数作为参数：

1 前进1页

2 前进2页

-1 回退1页

-2 回退2页

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>BOM</title>

<script>

/*

BOM(浏览器对象模型)

- BOM中为我们提供了一组对象，借助这组对象可以通过JS来操作浏览器

Window （代表整个浏览器窗口，全局对象）

Navigator （表示浏览器的信息）

Location （表示浏览器地址栏信息）

History （表示浏览器的历史记录）

Screen （表示用户的设备的屏幕信息）

- BOM对象都是window对象的属性，可以通过window对象访问，也可以直接访问

window.navigator

*/

// alert(navigator);

// alert(location);

// alert(history);

/*

location 表示的是浏览器的地址栏信息

- 可以通过window.location 或 location来对其进行访问

- location用于获取或设置浏览器的地址栏

- 如果直接打印location可以获取到浏览器的地址栏信息

- 也可以对其进行修改，修改后浏览器将会跳转到修改后的地址

通过修改location跳转地址会产生历史记录

assign()

- 用来修改location的值，和直接修改location效果一样

replace()

- 使用新的页面替换当前页面，不会生成历史记录

reload()

- 刷新当前页面，相当于刷新按钮

reload(true)

- 强制清缓存刷新页面

History

- 表示浏览器的历史记录

- 可以通过window.history 或 history来对其进行访问

- 历史记录这种东西属于个人隐私，所以JS无法直接访问用户的历史记录

它只能用来控制浏览器向前向后翻页

history.forward()

- 用来切换到下一页，就相当于浏览器的向前按钮

history.back()

- 用来回退到上一页，相当于浏览器的回退按钮

history.go();

- 用来跳转到只能的记录

- 需要一个整数作为参数：

1 前进1页

2 前进2页

-1 回退1页

-2 回退2页

*/

window.onload = function () {

var btn01 = document.getElementById('btn01');

btn01.addEventListener('click',function () {

// alert(location.host);

// location = 'https://www.baidu.com';

// location.assign('02_创建游戏界面.html');

// location.replace('https://www.baidu.com');

// location.reload(true);

history.go(-2);

});

};

</script>

</head>

<body>

<button id="btn01">点我一下</button>

<input type="text">

</body>

</html>

2BOM- Navigator:

Navigator

- 该对象表示的是浏览器的信息

- 可以通过 window.navigator 或 navigator来对其进行访问

- 可以通过navigator来识别浏览器的信息

- 由于历史原因Navigator中的大部分属性都不能用来识别浏览器

- 只剩下一个还有点用的属性 userAgent

userAgent 是一个字符串，字符串中包含浏览器的描述信息

- 火狐的：

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

- Chrome

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4168.2 Safari/537.36

- IE

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

- IE10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

/*

Navigator

- 该对象表示的是浏览器的信息

- 可以通过 window.navigator 或 navigator来对其进行访问

- 可以通过navigator来识别浏览器的信息

- 由于历史原因Navigator中的大部分属性都不能用来识别浏览器

- 只剩下一个还有点用的属性 userAgent

userAgent 是一个字符串，字符串中包含浏览器的描述信息

- 火狐的：

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

- Chrome

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4168.2 Safari/537.36

- IE

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

- IE10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

*/

var ua = navigator.userAgent;

// console.log(ua);

// if(/Firefox/.test(ua)){

// alert('你是火狐~~');

// }else if(/Chrome/.test(ua)){

// alert('你是Chrome~~');

// }

// 可以通过一些IE中独有的对象来判断一个浏览器是不是IE浏览器

if('ActiveXObject' in window){

alert('哈哈哈~你是IE');

}else{

alert('你不是IE');

}

// console.log(!!window.ActiveXObject);

</script>

</head>

<body>

</body>

</html>

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！