BOM-浏览器对象模型

最新推荐文章于 2022-06-04 11:51:51 发布

可儿可爱

最新推荐文章于 2022-06-04 11:51:51 发布

阅读量223

点赞数

文章标签： safari 前端

本文链接：https://blog.csdn.net/weixin_62520626/article/details/122391649

版权

window对象
定时器
页面时钟
地址栏对象
历史记录对象
URL编码

1.浏览器对象模型的基本概念

1.概念：
           * 将浏览器的各个组成部分封装为对象
2.特点：
           * BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。
3.组成：
           * Window(*****)：窗口对象
           * Location(**)：地址栏对象
           * History(*)：历史记录(当前窗口)对象
           * Navigator ：浏览器对象基本不用仅作了解
           * Screen：显示器屏幕基本不用仅作了解
               availHeight   获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
               availWidth   获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
               height       获取屏幕的垂直分辨率。
               width       获取屏幕的水平分辨率。

2.window对象与弹出有关的方法

1.使用方式：
window.方法名(); window 可以省略
方法名;

2.方法:
与弹出有关的方法
                   alert() 显示带有一段消息和一个确认按钮的警告框。
                   例子：window.alert("我是警告弹框");

                   (**)confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

                   例子：var flag=window.confirm("你确定吗？");


                   prompt() 显示可提示用户输入的对话框。

                   例子：var text=window.prompt("请输入地址"，"");//参数2：默认文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function del() {
				//2.弹出确认取消框
				var flag = window.confirm("你确认删除吗？"); //返回true表示确认，返回false表示取消
				if (flag) {
					document.write("删除操作")
				} else {
					document.write("取消删除")
				}
			}


			function input() {
				var text = window.prompt("请输入你的收货地址");
				document.write(text);
			}
		</script>
	</head>
	<body>
		<a href="javascript:void(del())">删除</a>

		<a href="javascript:void(input())">请填写收货地址</a>
	</body>
</html>

3.window对象与打开关闭有关的方法

open():打开新窗口
参数：打开目标的URL
返回值：返回新打开窗口的window引用

例子：var newWindwo=window.open("http://www.baidu.com");
                       newWindwo.close();

close():关闭窗口
谁调用我，我关谁
                       例子：window.close();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function intoWeb() {
				//打开窗口,返回的是新打开的窗口对象
				//var newWindow=window.open("http://www.163.com");
				//跳转到自己站点的页面，返回的是新打开的窗口对象
				 myWindow=window.open("index.html");
			}
			
			function gb(){
				window.close();
			}
			
			function gb2(){
				if(window.confirm("确认关闭窗口吗？")){
					myWindow.close();
				}
			}
		</script>
	</head>
	<body>
		<a href="http://www.sina.com">进入新浪</a>

		<button type="button" onclick="intoWeb()">进入网页</button>
		
		<a href="javascript:void(gb())">关闭本窗口</a>
		
		<a href="javascript:void(gb2())">关闭新打开的窗口</a>
		
	</body>
</html>

4.window对象与定时器有关的方法

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。循环执行
                   clearInterval() 取消由 setInterval() 设置的 timeout。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。只执行一次
                       * 参数：
                           参数1：字符串(js语句)或者函数对象
                           参数2：毫秒值。

                   clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

例子：
                       设置定时器 3秒后要执行的函数
                       var id=window.setTimeout("window.close()",3000);
                       var id1=window.setTimeout("shut()",3000);
                       var id2=window.setTimeout(shut，3000);

                       funtion shut(){
                           window.close();
                       }
                       取消定时器通过定时器的id 来取消
                       window.clearTimeout(id);
                       window.clearTimeout(id2);

执行一次的定时器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//执行一次的定时器
		/* 	function show(){
				alert("砰 爆炸了！")
			}
			
			window.setTimeout(show,2000);
			//window.setTimeout("show()",1000); */
			
			//设置定时器，返回的是定时器的id
			var timerID=window.setTimeout(function(){
				alert("砰 爆炸了！");
			},2000);
			
			//可以根据定时器的id取消定时器
			window.clearTimeout(timerID);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

循环定时器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var timerID=window.setInterval(function(){
				console.log("循环定时器执行了")
			},1000)
			
			function qx(){
				window.clearInterval(timerID);
			}
		</script>
	</head>
	<body>
		<a href="javascript:void(qx())">取消定时器</a>
	</body>
</html>

5.页面时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>

		<h1 id="time">2022-01-07 09:39:20</h1>
	</body>

	<script type="text/javascript">
		function showTime() {
			//获取h1标签对象
			var h1 = document.getElementById("time");
			//设置标签之间的内容
			var time = new Date().toLocaleString();

			h1.innerText = time;
		}
		//先手动调用一次
		showTime();
		//循环调用
		window.setInterval(showTime, 1000);
	</script>
</html>

6.window对象中的属性

BOM中其他对象，都是通过window对象的属性获取的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//BOM中其他对象，都是通过window对象的属性获取的
			var loc=window.location;
			var his=window.history;
			var nav=window.navigator;
			var scr=window.screen;
			
			//获取html文档对象
			var doc=window.document;
		</script>
	</head>
	<body>
	</body>
</html>

7.地址栏对象

获取方式：可以用window对象中的属性获取

var lc=window.location;
lc.href="http://www.baidu.com";

属性：
href：设置或获取当前的URL

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//获取地址栏对象
			//var loc=window.location;
			//loc.href="http://www.baidu.com";
			//window.location.href="http://www.baidu.com";
			//window可以省略不写
			//href 设置或返回完整的 URL。 
			//location.href="http://www.baidu.com";
			//var text=location.href;
			//alert(text);
			//URL：统一资源定位符
			//URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
			//也可认为由4部分组成： 协议、 主机、 端口、 路径
			//URL的一般语法格式为：
			//	(带方括号[] 的为可选项)：
			//protocol: // hostname[:port] / path / [:parameters][?query]#fragment
			
			//https://192.168.10.1:8080/path
			
			var hostname=location.hostname;
			var host=location.host;
			var protocol=location.protocol;
			var pathname=location.pathname;
			var search=location.search;
			var port=location.port;
			alert(hostname);
			alert(host);
			alert(protocol);
			alert(search);
			alert(port);
			
			function sx(){
				//刷新页面
				location.reload();
			}
			
		</script>
	</head>
	<body>
		<button type="button" onclick="sx()">刷新</button>
	</body>
</html>

从index页面跳转到demo页面获取search内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
						
		</script>
	</head>
	<body>
		<h1>我的首页</h1>
		<a href="demo.html?username=zhangsan&password=123456">跳转到demo页面携带参数</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var text=location.search; //获取?后面的参数
			//alert(text); ?username=zhangsan&password=123456
			var arr=text.replace("?","").split("&");
			alert(arr[0]);
			alert(arr[1]);
			
		</script>
	</head>
	<body>
		<h1>demo页面</h1>
	</body>
</html>

URL的详细格式：

8.历史记录对象

获取方式：可以用window对象中的属性获取
var ht=window.history;
ht.go(1);
方法：
go:
1:前进
-1：后退

b页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function qj(){
				//window.history.forward();
				window.history.go(1); //给正数前进
			}
		</script>
	</head>
	<body>
		<h1>b页面</h1>
		<a href="c.html">进入c页面</a>
		<a href="javascript:void(qj())">前进</a>
	</body>
</html>

c页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function ht(){
				//window.history.back();
				window.history.go(-1);//给负数就是后退
			}
		</script>
	</head>
	<body>
		<h1>c页面</h1>
		<a href="javascript:void(ht())">返回</a>
	</body>
</html>

9.URL编码解码

decodeURI() 解码某个编码的 URI。 1 5.5
encodeURI() 把字符串编码为 URI。 1 5.5
decodeURIComponent() 解码一个编码的 URI 组件。 1 5.5
encodeURIComponent() 把字符串编码为 URI 组件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
			
			//浏览器的地址栏，会自动对地址栏里面的内容进行 URL编码
			
			/* decodeURI() 解码某个编码的 URI。 1 5.5 
			   encodeURI() 把字符串编码为 URI。 1 5.5 
			decodeURIComponent() 解码一个编码的 URI 组件。 1 5.5 
			encodeURIComponent() 把字符串编码为 URI 组件。 
			*/
			
			var name="我爱你们";
			//编码
			var code=encodeURI(name);
			document.write(code);
			
			//解码
			var text=decodeURI(code);
			document.write(text);
			
			

		</script>
	</head>
	<body>
		
	</body>
</html>

10.浏览器对地址栏里的内容进行解码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var url=location.href;
			document.write(url);
			document.write("<hr>");
			
			var v=decodeURI(url);
			document.write(v);
		</script>
	</head>
	<body>
	</body>
</html>