BOM操作

最新推荐文章于 2023-05-10 19:14:50 发布

启之灵

最新推荐文章于 2023-05-10 19:14:50 发布

阅读量236

点赞数

分类专栏： JavaScript 文章标签： BOM

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/82951987

版权

JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

BOM操作

           /**、
           * BOM
           * 浏览器对象模型；
           * -bom可以使用js来操作浏览器
           * -bom对象
           *        window
           *            - 代表整个浏览器的窗口，同时window也是网页中的全局对象
           *        navigator
           *            -代表当全部浏览器的信息，通过该对象可以判断不同的浏览器；
           *        Location
           *            -代表当前浏览器的地址栏的信息，通过location可以获取地址栏的信息，或者操作浏览器的跳转页面；
           *        History
           *            -代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
           *                由于隐私原因，该对象不能回去到具体的历史记录就，只能操作浏览器向前或者向后翻页；
           *                而且该操作只在当前访问是有效；
           *        Screen
           *            -代表用户的屏幕信息，通过该独享可以获取到用户的显示器的相关信息；
           *
           *        这些bom对象在浏览器中都是作为window对象的属性保存的；都是全局对象；
           *            通过window对象来使用，也可以直接使用；
           *
           *
           */

1.navigator

判断浏览器的类型；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">

			//获取到的大多数是Netspace，不能帮助我们识别浏览器了
			console.log(navigator.appName);
			
			
			//通过userAgent判断浏览器的
			//但是在ie11的时候也是无法判断的；通过ActiveXObject属性在window有没有；
			var ua = navigator.userAgent;
			console.log(ua);
			//判断字符串ua中是否包含firefox，i是忽略大小写；
			if(/firefox/i.test(ua)){
				alert("你是火狐");
			}else if(/chrome/i.test(ua)){
				alert("你是chrome");
			}else if(/msie/i.test(ua)){
				//这种方式正判断到ie10；11是无法判断的
				alert("你是ie浏览器");
			}else if("ActiveXObject" in window){
				//ActiveXObject是ie浏览器特有的属性；
				alert("你是ie11浏览器");
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.history:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 判断浏览器的历史向前向后；
			 */
			
			//获取浏览器的历史访问记录的数量；
			console.log(history.length);
			
			//history.back();和浏览器的回退按钮是一样，回退到上一个访问的地址；
			//history.forward();和浏览器的前进按钮是一样，
			/*
			 * history.go();
			 * go(1);向前跳转1个页面，和forward一样；
			 * go(2);向前跳转两个页面；
			 * go(-1);向后跳转一个页面，和back一样；
			 * go(-2);向后跳转两个页面；
			 */
			
		</script>
	</head>
	<body>
	</body>
</html>

3.location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * location中封装了浏览器的地址栏中的信息；
			 */
			//直接打印;当前地址栏中的地址信息；
			console.log(location);
			
			//如果直接将location修改一个地址；动过事件触发可以跳转页面；
			location="www.baidu.com";
			
			//assign();和location修改一个地址是一样跳转页面
			location.assign("www.baidu.com");
			
			//强制清空缓存重新加载
			//reload(true);
			location.repeat(true);
			
			//replace("www.baidu.com");
			//不会产生历史记录，无法回退；
			location.replace("www.baidu.com");
		</script>
	</head>
	<body>
	</body>
</html>

4.window中常用的几个方法

4.1定时调用方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var span = document.getElementById("span");
				
				//window的定时调用函数；修改span中的数字；
				var count=0;
				//返回一个number类型的数据，numb这个是区分多个定时器的，相当于定时器的id；
				var numb = window.setInterval(function(){
					span.innerHTML=++count;
					if(count==10){
						//关闭定时调用；
						window.clearInterval(numb);
					}
				},500);
			};		
		</script>
	</head>
	<body>
		<span id="span">0</span>
	</body>
</html>

4.2延时调用

只执行一次；

var timer = window.setTimeout(function(){

},1000);

//关闭

window.clearTimeout(timer);