JavaScript中的BOM: history-Location-Navigator

JavaScript中的BOM: history-Location-NavigatorBOM 浏览器对象模型 BOM 中为我们提供了一组对象 借助这组对象可以通过 JS 来操作浏览器 Window 代表整个浏览器窗口 全局对象 Navigator 表示浏览器的信息 Location 表示浏览器地址栏信息 History

欢迎大家来到IT世界,在知识的湖畔探索吧!

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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

2BOM- Navigator:

Navigator

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

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

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

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

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

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

– 火狐的:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:77.0) Gecko/ 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)

欢迎大家来到IT世界,在知识的湖畔探索吧!<!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创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

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

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

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

#2023年度创作挑战##文章首发挑战赛##程序员##it##web网站##vue##react#

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/88669.html

(0)
上一篇 2024年 11月 18日 下午9:00
下一篇 2024年 11月 18日 下午9:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信