2021-03-19

最新推荐文章于 2024-07-12 22:54:26 发布

亐㔓832

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量73

点赞数

分类专栏： JS中的BOM对象文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55685975/article/details/114997225

版权

JS中的BOM对象专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.JS中的BOM对象
浏览器对象模型–Browser ObjectModel (BOM)
Window对象的属性
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari;
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 5，6，7，8;
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.οnlοad=function(){
				//确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
				var w=window.innerWidth || 
					  document.documentElement.clientWidth || 
					  document.body.clientWidth;
				var h=window.innerHeight || 
				      document.documentElement.clientHeight ||
					  document.body.clientHeight;
				window.alert(w+"*"+h);	  
			}
		</script>
	</head>
	<body>
	</body>
</html>

方法
其他方法：open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
格式:window.open(URL,name,features,replace)
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_win(){
				window.open("https://www.baidu.com/");
			}
			function open_aboutblank(){
				window.open("about:blank","空白页","width=200,height=100",false);
			}
		</script>
	</head>
	<body>
		<input type=button value="Open百度" οnclick="open_win()" /><br>
		<input type=button value="about:blank" οnclick="open_aboutblank()" />
	</body>
</html>

重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。
close() 方法用于关闭浏览器窗口。
说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。
只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var myWindow=null;
			
			window.οnlοad=function(){
				myWindow=window.open("about:blank","","width=200,height=100");
				myWindow.document.write("This is 'myWindow'");
			}
			
			function closeWin(){
				myWindow.close();
			}
		</script>
	</head>
	<body>
		<input type="button" value="Close 'myWindow'"
		οnclick="closeWin()" />
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var butObj=document.getElementById("but1");
				butObj.οnclick=function(){
					//window.alert("测试警告框");
					var val=window.confirm("确定要删除吗?");
					if(val){
						var divObj=document.getElementById("div1");
						var hObj=document.getElementById("h");
						divObj.removeChild(hObj);
					}
				}
				
				var butObj2=document.getElementById("but2");
				butObj2.οnclick=function(){
					var val=window.prompt("请输入姓名","");
					if(val.length>0){
						alert(val);
					}else{
						alert("不能为空!");
					}
				}
				
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<h1 id="h">测试确认框</h1>
		</div>
		<input id="but1" type="button" value="删除H1" /><br>
		<input id="but2" type="button" value="测试提示框" />
	</body>
</html>

子对象
       1.Window Screen–屏幕
          window.screen 对象包含有关用户屏幕的信息。
            1.总宽度和总高度 — screen.width / screen.height
            2.可用宽度和可用高度----screen.availWidth / screen.availHeight
            3.色彩深度----screen.colorDepth
            4.色彩分辨率----screen.pixelDepth

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.总宽度和总高度  --- screen.width   /  screen.height
			window.document.write("<h1>总宽度和总高度:"+window.screen.width+
			"*"+window.screen.height+"</h1>");
			//2.可用宽度和可用高度----screen.availWidth  / screen.availHeight
			window.document.write("<h1>可用宽度和可用高度:"+window.screen.availWidth+
			"*"+window.screen.availHeight+"</h1>");
			//3.色彩深度----screen.colorDepth
			window.document.write("<h1>色彩深度:"+window.screen.colorDepth+"</h1>");
			//3.色彩分辨率----screen.pixelDepth
			window.document.write("<h1>色彩分辨率:"+window.screen.colorDepth+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

2.Window Location—页面的地址 (URL)
对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			document.write("<h1>href:"+window.location.href+"</h1>");
			document.write("<h1>pathname :"+window.location.pathname +"</h1>");
			document.write("<h1>search :"+window.location.search+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<script>
			window.οnlοad=function(){
				var but1=document.getElementById("but1");
				var username=document.getElementById("text1");
				var password=document.getElementById("pass1");
				var span=document.getElementById("span");
				but1.οnclick=function(){
					var usernamevalue=username.value;
					var passwordvalue=password.value;
					if(usernamevalue=="zhangsan" && passwordvalue=="123456"){
						//跳转到成功的页面，传递用户名
						window.location.href="success.html?username="+usernamevalue;
					}else{
						//给出错误提示
						span.innerHTML="<font color='red'>用户名密码错误!</font>";
					}
				}
				//为用户名输入框添加聚焦事件
				username.οnfοcus=function(){
					span.innerHTML="";
					username.value="";
					password.value="";
				}
			}
		</script>
	</head>
	<body>
		<center>
		<table border="1px">
			<tr align="center">
				<td colspan="2">
					<h1>用户登录</h1>
					<span id="span"></span>
				</td>
			</tr>
			<tr align="center">
				<td>用户名:</td>
				<td><input id="text1" type="text" name="username"></td>
			</tr>
			<tr align="center">
				<td>密码:</td>
				<td><input id="pass1" type="password" name="password"></td>
			</tr>
			<tr align="center">
				<td colspan="2"><input id="but1" type="button" value="用户登录" /></td>
			</tr>
		</table>
		</center>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.οnlοad=function(){
				var searchvalue=window.location.search;
				if(searchvalue.length<=0){
					window.location.href="login.html";
				}else{
				    //searchvalue===?username=zhangsan
					//var strarray=searchvalue.split("=");
					//var username=strarray[1];
					var username=searchvalue.split("=")[1];
					var h1obj=document.getElementById("h1");
					h1obj.innerHTML="欢迎，"+username+"登录成功!";
				}
			}
		</script>
	</head>
	<body>
		<center>
			<h1 id="h1">欢迎，登录成功!</h1>
		</center>
	</body>
</html>

3.Window History—历史对象
4.Window Navigator–浏览器的信息

亐㔓832

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-19

1.JS中的BOM对象浏览器对象模型–Browser ObjectModel (BOM)Window对象的属性有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari;window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度对于 Internet Explorer 5，6，7，8;document.docume
复制链接

扫一扫