javascript(24)BOM

最新推荐文章于 2024-07-16 19:07:40 发布

冲啊Javascripit

最新推荐文章于 2024-07-16 19:07:40 发布

阅读量126

点赞数

分类专栏： javascipt

本文链接：https://blog.csdn.net/weixin_43752554/article/details/105618616

版权

javascipt 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

BOM

浏览器对象模型
BOM可以使我们通过js来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
在BOM对象
Window
- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
  Navigator
- 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器
- 由于历史原因，Navigator对象中的大部分属性都已经不能再帮助我们识别浏览器了
- 一般我们只会使用userAgent来判断浏览器的信息
  userAgent就是一个字符串，这个字符串包括有用的描述浏览器信息的内容
  不同的浏览器会有不同的userAgent
  Location
- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
  History
- 代表浏览器的历史记录，可以通过该对象来操作浏览器的浏览记录
  由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页
  而且该操作只能在当次访问有效
  Screen
- 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，
可以通过window对象来使用，也可以直接使用

Navigator 属性
appName 浏览器的名称

对于高级别的IE来说，隐藏了自己的属性
可以采用判定是否含有特定的方法
如果通过UserAgent(通过正则表达式）不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
比如：ActiveXObject
如果window.ActiveXObject不能判断出来
就用
“ActiveXObject” in window
，判断window中是否有这个方法

1.Navigator


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
//			使用window.对象名和直接使用对象一样
			/*console.log(window.navigator);
			console.log(window.history);
			console.log(window.location);
			console.log(window.screen);*/
			/*console.log(navigator);
			console.log(history);
			console.log(location);
			console.log(screen);*/
			
//			console.log(navigator.appName);
			/*IE10以及之下的浏览器显示信息为: Microsoft Internet Explorer
			但是IE11位Netscape,通过appName不能判断出各个浏览器属性
			其他浏览器为Netscape*/
//			console.log(navigator.userAgent);
			/*Chrome浏览器
			Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36
			FirxFox
			Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0
			IE8
			Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E) 
			IE9
			Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0) 
			IE10
			 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0) 
			每个浏览器都有相应的名字对应
			IE8-IE10的关键字为MSIE
			但是到了IE11这些关键字就没有了，IE浏览器抹除了微软和MSIE的这些关键字
			*/
			//通过关键字来判别不同的浏览器
			/*if(/firefox/i.test(navigator.userAgent)){
				alert("是 火狐");
			}
			else if(/chrome/i.test(navigator.userAgent)){
				alert("是 chrome");
			}
			else if(/msie/i.test(navigator.userAgent)){
				alert("是gas的IE");
			}*/
			
			
//			通过不同的方法来判定是否是IE,主要根据不同其他浏览器的一些特定方法


			//ActiveXObject是IE的window中独有的内容
			if(window.ActiveXObject){
				
				alert("是IE！！");
			}
			else{
				
				alert("好的浏览器");
			}
			
//			alert(ActiveXObject);
			
			
//			判断window中是否有这个方法
			/*if("ActiveXObject" in window)
			alert("是IE！！");
			else{
				
				alert("好的浏览器");
			}*/
		</script>
	</head>
	<body>
	</body>
</html>

2.History
History
对象可以用来操作浏览器向前后或者向后翻页

length
属性，可以后去到当前访问的连接数量

back（）
方法，回退到上一个页面，作用和浏览器的回退按钮一样
forword（）
方法，可以跳转到下一个页面，作用和浏览器的前进按钮一样

go（）
方法，可以用来跳转到指定的页面
他需要一个整数作为参数
1.表示向前跳转一个页面
2.表示向前跳转两个页面
-1.向后跳转一个页面
-2.向后跳转两个页面

3.Locatoin
Location
该对象封装了浏览器的地址栏信息

如果直接打印Location，则可以获取到地址栏的信息（当前路径）

如果直接将Location属性修改为一个完整路径，或者相对路径，则我们页面会自动跳转到该路径，并且会生成相对应的历史记录

assign（）
用来跳转到其他的页面，作用和直接修改location一样

reload（）
用于重新加载当前页面，作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存，刷新页面

replace（）
可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录，不能使用回退按钮回退



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.οnlοad=function(){
				var but01=document.getElementById("but01");
				but01.οnclick=function(){
//					获得当前地址
//					console.log(location);
//					修改路径
//					1.
					location="https://www.bilibili.com/video/BV1YW411T7GX?p=126";
//					2.
//					location.assign("https://www.bilibili.com/video/BV1YW411T7GX?p=1");
//					重新加载页面,作用和刷新差不多,如果传入true,还会清空缓存
//					location.reload(true);
//					replace()方法,也是用一个网址代替当前的地址,但是不可用返回
					location.replace("https://www.bilibili.com/video/BV1YW411T7GX?p=126");
				};
			};
		</script>
	</head>
	<body>
		<button id="but01">点击</button>
	</body>
</html>