Bom

最新推荐文章于 2026-01-06 23:00:43 发布

原创最新推荐文章于 2026-01-06 23:00:43 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

bom

1 篇文章

订阅专栏

本文深入探讨了浏览器对象模型(BOM)的核心概念与应用，包括窗口位置与大小的控制、导航与窗口操作、定时器的使用技巧以及系统对话框的调用方式。文章通过实例演示了如何利用BOM进行网页布局调整、定时任务设置和用户交互，是前端开发者不可多得的技术指南。

文章目录

BOM

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

1.窗口位置

  	screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)
  	screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持)
  	pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
  	pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
  		IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。

2.窗口大小

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

3.导航和打开窗口

window.open()
可以导航到一个特定的URL，也可以打开一个新的浏览器窗口,该方法会返回一个指向新窗口的引用。引用的对象与其他的window对象类似。
参数：

1)要加载的URL

2)窗口目标,框架名

 	特殊名：
   	_self	当前浏览器页面
   	_parent	当前页面父页面
   	_top	当前页面顶级页面
   	_blank	新页面

3) 一个特定字符串

	是用逗号分隔的设置字符串
	channelmode=yes|no|1|0 	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
	directories=yes|no|1|0 	是否添加目录按钮。默认是肯定的。仅限IE浏览器
	fullscreen=yes|no|1|0 	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
	width=pixels 			窗口的宽度.最小.值为100
	height=pixels 			窗口的高度。最小.值为100
	left=pixels 			该窗口的左侧位置
	location=yes|no|1|0 	是否显示地址字段.默认值是yes
	menubar=yes|no|1|0 		是否显示菜单栏.默认值是yes
	resizable=yes|no|1|0 	是否可调整窗口大小.默认值是yes
	scrollbars=yes|no|1|0 	是否显示滚动条.默认值是yes
	status=yes|no|1|0 		是否要添加一个状态栏.默认值是yes
	titlebar=yes|no|1|0 	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
	toolbar=yes|no|1|0 		是否显示浏览器工具栏.默认值是yes
	top=pixels 				窗口顶部的位置.仅限IE浏览器

4)表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

如果传递了第二个参数，而且该参数是已有窗口或框架的名称，就会在具有该名称的窗口或框架中加载第一个参数指定的URL。
如果给window.open传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页

调整窗口大小
//调整到100*100
resizeTo(100,100);//接受浏览器窗口的新高度和新宽度
//调整到200*150
resizeBy(100,50); //接受新窗口与原窗口的宽度和高度之差

移动窗体
	多用于新建窗体
	window.moveTo(0,0); 接受的是新位置的x和y坐标值
	window.moveBy(0,100);接受的是在水平和垂直方向上移动的像素值。
滚动条
	scrollBy(xnum,ynum) 方法可把内容滚动指定的像素数。注意： 要使此方法工作 window 滚动条的可见属性必须设置为true！
	scrollTo(xpos,ypos) 方法可把内容滚动到指定的坐标。

例如：
创建新窗体
var w = window.open(“http://www.baidu.com”,"_blank",“toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400”);
改变窗体大小
w.resizeTo(400,200);

4.间歇调用和超时调用

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

1) setTimeout();

  		该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超市调用。可以通过clearTimeout(ID);
 		参数：
 		 	1.要执行的代码
			2.以毫秒表示的时间。
		例如: 
			一秒后调用
			var id = setTimeout(function(){
				alert(1000);
			},1000);
			console.log(id);
			//清除
			clearTimeout(id);

2) setInterval();

  		按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用
  		参数：
  			1.要执行的代码
			2.以毫秒表示的时间。
  			clearInterval(ID);  //取消间歇调用

3) 使用超时调用来模拟间歇调用

4) setTimeout，setInterval配合完成调用函数

		function invoke(f,start,interval,end){
			if(!start){
				start = 0;
			}
			if(arguments.length<=2){
				setTimeout(f,start);
			}else {
				function repeat(){
					var h = setInterval(f,interval);
					if(end){
						setTimeout(function(){
							clearInterval(h);
						},end);
					}
				}
				setTimeout(repeat,start);
			}
		}

5. 系统对话框

  	alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。
	
	alert()
		该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息
	confirm()
		确认对话框，显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值，true表示单击了OK，false表示单击了cancel或者X按钮
		if(confirm("确定吗？？")){
			alert("好！");
		}else{
			alert("切！");
		}
	prompt() 
		会话框，提示用户输入一些文本。显示包含文本，ok按钮,cancel按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数，要显示给用户的文本提示和文本输入域的默认值。

		如果用户单击OK按钮，该方法返回输入域的值，如果用户单击了Cancel或者关闭对话框该方法返回null.