BOM浏览器对象模型

BOM浏览器对象模型是规范浏览器对js语言的支持(js调用浏览器本身的功能)。BOM的具体实现是window对象

window对象学习-1

  • window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。
  • 框体方法
    • alert:警告框 提示一个警告信息，没有返回
    • confirm:确认框 提示用户选择一项操作（确定/取消）
      • 点击确定 返回true
      • 点击取消 返回false
    • prompt:提示框， 提示用某个信息的录入或者说收集
      • 点击确定，返回当前用书录入的数据，默认返回空字符串
      • 点击取消,返回null
  • 定时和间隔执行方法
    • setTimeout:指定的时间后执行指定的函数
      • 参数1：函数对象
      • 参数2：时间，单位毫秒。
      • 返回值：返回当前定时器的id
    • setInterval:每间隔指定的时间执行指定的函数
      • 参数1：函数对象
      • 参数2：时间，单位毫秒。
      • 返回值：返回当前间隔器的id
    • clearTimeout:用来停止指定的定时器
      • 参数：定时器的id
    • clearInterval:用来停止指定的间隔器
      • 参数：间隔器的id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
	<head>
		<title>window对象学习</title>
		<meta charset="UTF-8"/>
		<!--声明js代码域-->
		<script type="text/javascript">
			//框体方法学习：
				//警告框
				function testAlert(){
					var a=window.alert("我是警告框");
					alert(a);
				}
				//确认框
				function testConfirm(){
					var flag=window.confirm("你确定要删除吗?");
					alert(flag);
				}
				//提示框
				function testPrompt(){
					var str=window.prompt("请输入昵称：");
					alert(str);
				}
/*----------------------------------------------------------------------------------------------*/
				var idi;
				var ids
				//定时执行
					function testSetTimeout(){
						idi=window.setTimeout(function(){
							alert("我是定时执行");
						},3000);
					}
				//间隔执行
					function testSetInterval(){
						ids=window.setInterval(function(){
							alert("我是间隔执行");
						},2000);
					}
				//停止当前的定时方法
					function testClearTimeout(){
						window.clearTimeout(idi);
					}				
					function testClearInterval(){
						window.clearInterval(ids);	
					}
		</script>
	</head>
	<body>
		<h3>window对象学习</h3>
		<hr />
		<input type="button" name="" id="" value="测试警告框" onclick="testAlert();" />
		<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()" />
		<input type="button" name="" id="" value="测试提示框"  onclick="testPrompt()"/>
		<hr />
		<input type="button" name="" id="" value="测试setTimeout--定时执行"  onclick="testSetTimeout()"/>
		<input type="button" name="" id="" value="测试setInterval--间隔执行"  onclick="testSetInterval()"/>
		<input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()" />
		<input type="button" name="" id="" value="测试clearInterval--停止指定的间隔器" onclick="testClearInterval()" />
	</body>
</html>

window对象学习-2

  • 子窗口方法
    • window.open(‘子页面的资源(相对路径)’,’打卡方式’,’配置’);
    • 示例：window.open(‘son.html’,’newwindow’,’height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes’);
    • 注意:关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。
    • 子页面调用父页面的函数：window.opener.父页面的函数
  • window对象的常用属性
    • 地址栏属性:location
      • window.location.href=”新的资源路径（相对路径/URL）”
      • window.location.reload()重新加载页面资源
    • 历史记录属性
      • window.history.forward() 页面资源前进，历史记录的前进。
      • window.history.back() 页面资源后退，历史记录后退
      • window.history.go(index) 跳转到指定的历史记录资源
      • 注意window.history.go(0)相当于刷新。
    • 屏幕属性
      • window.srceen.width;//获取屏幕的宽度分辨率
      • window.screen.height;//获取屏幕的高度分辨率
    • 浏览器配置属性
      • window.navigator.userAgent
    • 主体面板属性(document)
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      <html>
      	<head>
      		<title>js的window对象学习2</title>
      		<meta charset="UTF-8"/>
      		
      		<!--声明js代码域-->
      		<script type="text/javascript">
      			//1、子页面方法
      				function testOpen(){
      					window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
      				}
      			//2、子页面调用父页面的函数
      				function testFather(){
      					alert("父页面");
      				}
      			/*----------------------------------------------------------------------------*/
      			//1、地址栏属性学习--location
      				function testLocation(){
      					window.location.href="http://www.baidu.com";
      				}
      				
      				function testLocation2(){
      					window.location.reload();
      				}
      			//2、历史记录属性
      				function testHistory(){
      					window.history.forward();
      				}
      				
      				function testHistory2(){
      					window.history.go(0);
      				}
      			//3、屏幕属性学习
      				function testScreen(){
      					var x=window.screen.width;
      					var y=window.screen.height;
      					alert(x+":"+y)
      				}
      			//4、浏览器配置属性
      				function testNa(){
      					alert(window.navigator.userAgent);
      					
      				}
      		</script>
      	</head>
      	<body>
      		<h3>js的window对象学习2</h3>
      		<hr />
      		<input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
      		<hr />
      		<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" />
      		<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" />
      		<br /><br />
      		<input type="button" name="" id="" value="测试历史记录属性--history-前进"  onclick="testHistory();"/>
      		<input type="button" name="" id="" value="测试历史记录属性--history-go"  onclick="testHistory2();"/>
      		<br /><br />
      		<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" />
      		<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" />
      	</body>
      </html>