本文主要是介绍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中的大部分属性都不能用来识别浏览器- 只剩下一个还有点用的属性 userAgentuserAgent 是一个字符串，字符串中包含浏览器的描述信息- 火狐的：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0- ChromeMozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4168.2 Safari/537.36- IEMozilla/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- IE10Mozilla/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创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
这篇关于JavaScript中的BOM: history-Location-Navigator的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
