BOM浏览器对象模型

最新推荐文章于 2025-05-20 11:57:34 发布

玲玲酱

最新推荐文章于 2025-05-20 11:57:34 发布

阅读量109

点赞数

分类专栏： JavaScript 文章标签：前端 html5 css3 javascript

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109274599

版权

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

窗口大小

innerWidth 页面视图区的宽度
innerHeight 页面视图区的高度
outerWidth 浏览器窗口的宽度
outerHeight 浏览器窗口的高度
所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.assign 加载新文档

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	    //console.log(innerHeight);
		//console.log(innerWidth);
		//console.log(location.href);
		//location.assign("http://www.baidu.com");

		//window.open("http://www.baidu.com");

		var result=confirm("是否确认删除？");
		console.log(result);


	</script>
</head>
<body>
	<a href="1.html">bom.html</a>
</body>
</html>

history对象：

length:保存打开页面的个数
back()：回退一个页面
forword()：前进一个页面
go(num)：进入到num页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		console.log(history.length);
		window.onload=function(){
			var btns=document.getElementsByTagName('button');
			btns[0].onclick=function(){
				history.back()
			}
			btns[1].onclick=function(){
				history.forward();
			}
			btns[2].onclick=function(){
				history.go(1);
			}
		}
	</script>
</head>
<body>
	<h1>2.html</h1>
	<a href="3.html">3.html</a>

	<button>back</button>
	<button>forward</button>
	<button>go</button>
</body>
</html>

弹框：

1）alert():提示
没有返回值
2）prompt()：提示输入
返回值：
取消：null
确认：string类型的内容
3）confirm()：确认框
返回值：
确认：true
取消：false

超时调用和间歇调用：

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行

1)超时调用：超过时间只调用一次

id=setTimeout(handler,time); time：ms

2)取消超时调用: clearTimeout(id);

3)间歇调用: 每个隔time时间就调用一次

var id=setInterval(handler,time);

offsetLeft当前元素距离浏览器左侧的偏移量

offsetTop当前元素距离浏览器顶部的偏移量

4）取消间歇调用：clearInterval(id);

5）超时模拟间歇

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<script>
		window.onload=function(){
			var btns=document.getElementsByTagName('button');
			var div=document.getElementsByTagName('div')[0];

			function handler(){
				div.style.marginLeft="100px";
			}
			//handler();//立刻调用

			//1.超时调用
			btns[0].onclick=function(){
				var id=setTimeout(handler,3000);//3秒钟之后执行函数

				//2.取消超时调用
				btns[1].onclick=function(){
					clearTimeout(id);
				}
			}

			//3.间歇调用
			btns[2].onclick=function(){
				var id=setInterval(function(){
					div.style.marginLeft=div.offsetLeft+10+"px";
					},100);


				//4.取消间歇调用
				btns[3].onclick=function(){
					clearInterval(id);
				}
			}
			
			//5.超时模拟间歇
			btns[4].onclick=function(){
				function move(){
					div.style.marginLeft=div.offsetLeft+10+"px";
					setTimeout(move,100);
				}
				setTimeout(move,100);
			}
		}
	</script>
</head>
<body>
	<div></div>
	<button>超时调用</button>
	<button>取消超时调用</button>
	<button>间歇调用</button>
	<button>取消间歇调用</button>
	<button>超时模拟间歇</button>
</body>
</html>