Java Script 中的 BOM 对象

最新推荐文章于 2024-09-11 15:33:18 发布

怪胎圣徒

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量205

点赞数

分类专栏： Java script 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51516810/article/details/116505273

版权

Java script 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

java script 中的 BOM 对象

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
主要功能：
1.弹出新浏览器窗口的能力；
2. 移动、关闭和更改浏览器窗口大小的能力；
3. 可提供WEB浏览器详细信息的导航对象；
4.可提供浏览器载入页面详细信息的本地对象；
5 .可提供用户屏幕分辨率详细信息的屏幕对象；
6 支持Cookies；
7. Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。
1. window 对象中的属性
确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
2.window 对象中的函数
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
close() 方法用于关闭浏览器窗口。
3.关于弹框的函数
警告框:window.alert(“sometext”);
确认框:window.confirm(“sometext”);
提示框:window.prompt(“sometext”,“defaultvalue”);
4.window 对象中的子对象
screen–屏幕对象
location–页面的地址对象
history–历史对象
navigator–浏览器信息对象

1.1window 对象中的属性
确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
有 2 种方法

对于 Internet Explorer、Chrome、Firefox、Opera 以及 Safari 使用
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5 使用
document.documentElement.clientHeight - 浏览器窗口的内部高度
document.documentElement.clientWidth - 浏览器窗口的内部宽度
或者
document.body.clientHeight - 浏览器窗口的内部高度
document.body.clientWidth - 浏览器窗口的内部宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器窗口的尺寸</title>
		<script>
			window.οnlοad=function(){
		//对于 Internet Explorer、Chrome、Firefox、Opera 以及 Safari 使用
		 //window.innerHeight - 浏览器窗口的内部高度
        //window.innerWidth - 浏览器窗口的内部宽度		
		//对于 Internet Explorer 8、7、6、5 使用
        //document.documentElement.clientHeight - 浏览器窗口的内部高度
        //document.documentElement.clientWidth - 浏览器窗口的内部宽度		
		//或者
		//document.body.clientHeight - 浏览器窗口的内部高度		
		//document.body.clientWidth - 浏览器窗口的内部宽度
		var w=window.innerWidth  ||document.documentElement.clientWidth ||document.body.clientWidth;
		var h=window.innerHeight  ||document.documentElement.clientHeight || document.body.clientHeight;	
			document.write("<h1>"+w+"*"+h+"</h1>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.1 window 对象中的函数
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
格式:window.open(URL,name,features,replace)
参数 1-URL:要在新窗口中显示的文档的地址[可选的字符串]. 没有 url[1.不写2.空字符串]—窗口依然打开，只是没有内容
参数 2–name:新窗口的名称. 可以用作标记 <a> 和 <form> 的属性 target 的值. 如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
参数 3-features:新窗口要显示的标准浏览器的特征【尺寸】
如果省略该参数，新窗口将具有所有标准特征。
参数 4-replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目. true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
close() 方法用于关闭浏览器窗口。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>open()/close()</title>
		<script>
		window.οnlοad=function(){
	var but1=document.getElementById("but1");
	 but1.οnclick=function(){
		 //open (url,name,features,false)
		 //参数1:要在新窗口中显示的文档的地址
		 //没有url【1.不写 2.空字符串】---窗口依然打开，只是没有内容
		//参数2 name 新窗口的名称
		//参数3 新窗口要显示的标准浏览器的特征 【尺寸】
		//参数4  replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目， 还是替换浏览历史中的当前条目. 
		 //false - URL 在浏览历史中创建新的条目。
		 //true - URL 替换浏览历史中的当前条目。
		//      window.open("https://www.baidu.com","baidu","width:300,height:300",false);
		      window.open("BOMduixiang.html","baidu","width:300,height:300",false);
	        }
		var but2=document.getElementById("but2");
		but2.οnclick=function(){
			window.close();
		}
		}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="open()"/><br>
		<input id="but2" type="button" value="close()"/><br>
	</body>
</html>

3.1关于弹框的函数
1.警告框:window.alert(“sometext”);
2.确认框:window.confirm(“sometext”);
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。
3.提示框:window.prompt(“sometext”,“defaultvalue”);
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操
纵。如果用户点击确认，那么返回值为输入的值.如果用户点击取消，那么返回值
为 null。
参数 1—提示信息
参数 2—提示框的默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于弹框的函数</title>
		<script>
			window.οnlοad=function(){
			var but1=document.getElementById("but1");
			but1.οnclick=function(){
				window.alert("警告框");	
				//alert("警告框");
				}
			var but2=document.getElementById("but2");	
			but2.οnclick=function(){
				//当你点击“确认”，确认框返回true，如果点击“取消”，确认框返回false
		var flag=window.confirm("确定要退出吗？");	
		//window.alert(flag);
		if(flag){
			window.close();
		}
			}
		var but3=document.getElementById("but3");
		but3.οnclick=function(){
		var res=window.prompt("请输入姓名进入下一步","");	
			//alert(res);
			if(res!=null){
				but3.value=res;
			}
			}			
		}
		</script>
	</head>
	<body>
	<input id="but1" type="button" value="警告框"/><br>
	<input id="but2" type="button" value="确认框"/><br>
	<input id="but3" type="button" value="提示框"/><br>
	</body>
</html>

4.1.1 window 对象中的子对象–[screen–屏幕对象]
window.screen 对象包含有关用户屏幕的信息。

总宽度和总高度 — width / height
可用宽度和可用高度----availWidth / availHeight
色彩深度----colorDepth
色彩分辨率—pixelDepth

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>screen--屏幕对象</title>
		<script >
		window.οnlοad=function(){
		  //总宽度和总高度---width/height
		var w=window.screen.width;  
		var h=window.screen.height;	
		document.write("<h1>总宽度和总高度===="+w+"*"+h+"</h1>");	
		//可用宽度和可用高度	availWidth/availHeight
			var aw=window.screen.availWidth;
			var ah=window.screen.availHeight;
				document.write("<h1>总宽度和总高度===="+aw+"*"+ah+"</h1>");	
		//色彩深度---colorDepth
	var colorDepth=window.screen.colorDepth;
	document.write("<h1>色彩深度===="+colorDepth+"</h1>");	
		//色彩分辨率---pixelDepth
		var pixelDepth=window.screen.pixelDepth;
	document.write("<h1>色彩分辨率===="+pixelDepth+"</h1>");
		}
		</script>
	</head>
	<body>
	</body>
</html>

4.12 window 对象中的子对象–[location–页面的地址对象]
href 属性返回当前页面的 URL。
search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询（问号 ? 之后的部分）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location--页面的地址对象</title>
		<script>
		window.οnlοad=function(){
		var but1=document.getElementById("but1");
			but1.οnclick=function(){
		var test1=document.getElementById("test1");
		var test2=document.getElementById("test2");
	    var name=test1.value;
		var pass=test2.value;
		if(name=="zhangsan"&& pass=="123456"){
		window.location.href="dengluchenggong.html?username="+name;
		}else{
			window.location.href="location.html";
		}
		}
			}	
			</script>
	</head>
	<body>
	<input id="test1" name="username" type="text" /><br>
	<input id="test2" name="password" type="password" /><br>
	<input id="but1" value="登陆" type="button" /><br>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>成功</title>
		<script>
			window.οnlοad=function(){
		//var urlhref=window.location.href;
		//	alert(urlhref);	
		///search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询 部分（问号 ? 之后的部分）。
		var searchurl=window.location.search;
		//alert(searchurl);
		//searchurl===[?username=zhangsan]
		//searchurl===[?username=zhangsan&password=123456]
		//var strarray=searchurl.split("=");
		var strarray=searchurl.split("&");
		//strarray[0]==[?username=zhangsan]
		//strarray[1]==[password=123456]
		for(var strarrayindex in strarray){
			var strinfo=strarray[strarrayindex].split("=");
			//strarrayindex=0---strinfo[0]==[?username]
			//strarrayindex=0---strinfo[1]==[zhangsan]
			//strarrayindex=1---strinfo[0]==[password]
			//strarrayindex=1---strinfo[1]==[123456]
			if(strinfo[0]=="?username"){
			var domarray=document.getElementsByTagName("h1");
			domarray[0].innerHTML=strinfo[1]+",登陆成功！";	
			}
		}
			//alert(strarray[1]);
		//var domarray=document.getElementsByTagName("h1");
		//var domarray=document.getElementsByTagName("h1");
	//	domarray[0].innerHTML=	strarray[1]+"登陆成功！";
			// domarray[0].innerHTML=	strarray[1]+"登陆成功！";
				
			}
			
		</script>
	</head>
	<body>
		<h1></h1>
	</body>
</html>

4.13.window 对象中的子对象–[history–历史对象]
back() - 与在浏览器点击后退按钮相同
forward() - 与在浏览器中点击按钮向前相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history</title>
		<script>
			window.οnlοad=function(){
		var but1=document.getElementById("but1");
			but1.οnclick=function(){
			window.history.forward();	
			}	
			}
		</script>
	</head>
	<body>
		<h1>history 测试第一页面</h1>
		<a href="history2.html">打开测试第二页面</a><br>
		<input id="but1" type="button" value="前进" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history2</title>
		<script>
			window.οnlοad=function(){
		var but1=document.getElementById("but1");
			but1.οnclick=function(){
			   window.history.back();	
			}	
			
			var but2=document.getElementById("but2");
				but2.οnclick=function(){
				window.history.forward();	
			}	
			}
		</script>
	</head>
	<body>
		<h1>history 测试第二页面</h1>
		<a href="history3.html">打开测试第三页面</a><br>
		<input id="but1" type="button" value="后退" />
		<input id="but2" type="button" value="前进" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history3</title>
		<script>
			window.οnlοad=function(){
		       var but1=document.getElementById("but1");
			   but1.οnclick=function(){
			      window.history.back();	
			}	
		}
		</script>
		</head>
	<body>
		<h1>history测试第三页面</h1>
    <input id="but1" type="button" value="后退" />
	</body>
</html>

4.14 window 对象中的子对象–[navigator–浏览器的信息对象]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>navigator---浏览器的信息对象</title>
		<script>
			window.οnlοad=function(){
			document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>"); 
			document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>");
			document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>"); 
			document.write("<h1>启用 Cookies:"+window.navigator.cookieEnabled+"</h1>"); 
			document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>"); 
			document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>"); 
			document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");	
				}
			</script>
	</head>
	<body>
	</body>
</html>

5.Javascript 中的计时函数
在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为
计时事件。
setInterval(“function”,milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。
参数 1–function–被间隔执行的动作
参数 2–milliseconds–间隔时间【毫秒数】
clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。
参数 intervalVariable— setInterval()的返回值。
setTimeout(“function”,milliseconds)暂停指定的毫秒数后执行指定的代码. 参数 1–指定运行的代码
参数 2–指定的毫秒数
clearTimeout(timeoutVariable) 方法用于停止执行 setTimeout()方法的函数代码。
参数 timeoutVariable----setTimeout 方法的返回值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计时函数</title>
		<script>
			var returnval=null;
		window.οnlοad=function(){
	var but1=document.getElementById("but1");
		but1.οnclick=function(){
			var harray=document.getElementsByTagName("h1");
			//得到时间日期的函数
	function getDate(){
		var date1=new Date();
		var y=date1.getFullYear();
		var mo=date1.getMonth()+1;
		var da=date1.getDate();
		var h=date1.getHours();
		var mi=date1.getMinutes();
		var s=date1.getSeconds();
		var time=y+"年"+mo+"月"+da+"日  "+h+":"+mi+":"+s;
		harray[0].innerHTML=time;
		//开始计时操作
		}
	
		//returnval=setInterval(function(){getDate();},1000);
		returnval=setTimeout(function(){getDate();},6000);
		}	
		}	
		function testKeydown(event){
			if(event.keyCode==38){
				//clearInterval(returnval);
				clearTimeout(returnval)
				}
				}
		</script>
	</head>
	<body οnkeydοwn="testKeydown(event);">
		<h1></h1>
		<input id="but1" type="button" value="开始"/>
	</body>
</html>

怪胎圣徒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Script 中的 BOM 对象

java script 中的 BOM 对象BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。主要功能：1.弹出新浏览器窗口的能力；2. 移动、关闭和更改浏览器窗口大小的能力；3. 可提供WEB浏览器详细信息的导航对象；4.可提供浏览器载入页面详细信息的本地对
复制链接

扫一扫

专栏目录