JavaScript 高级（4）_js pixeldepth-优快云博客

本文链接：https://blog.youkuaiyun.com/zxcWh/article/details/120710483

JavaScript中的BOM对象

浏览器对象模型--Browser ObjectModel (BOM)

1.window属性

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于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

实用的 JavaScript 方案（涵盖所有浏览器）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=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>

2.window 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

格式：window.open(URL,name,features,replace)

URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

<!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百度" onclick="open_win()" /><br>
		<input type=button value="about:blank" onclick="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.onload=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'"
		onclick="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.onload=function(){
				var butObj=document.getElementById("but1");
				butObj.onclick=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.onclick=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>

3.Window子对象

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>
            //window screen -- 屏幕
            //1.总宽度和总高度 -- screen.width   /screen.geight
            //2.可用宽度和可用高度  ---screen.availWidth / screen.avalHeight
            //3.色彩深度---screen.doloDepth
            //4.色彩分辨率---screen.pixelDepth

            window.onload=function(){
                //总宽度和总高度
                var wid= window.screen.width;
                var hei= window.screen.height;
                document.write("<h2>总宽度和总高度=="+wid+"*"+hei+"</h2>");
                //可用宽度和可用高度
                var wid1=window.screen.availWidth;
                var hei2=window.screen.availHeight;
                document.write("<h2>可用宽度和可用高度=="+wid1+"*"+hei2+"</h2>");
                //色彩深度
                var color1=window.screen.colorDepth;
                document.write("<h2>色彩深度=="+color1+"</h2>");
                //色彩分辨率
                var pixelDepth =window.screen.pixelDepth;
                document.write("<h2>色彩分辨率=="+pixelDepth+"</h2>")
            }
        </script>
    </head>
    <body>

    </body>

2.window Location---页面的地址 (URL)

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href 属性返回当前页面的 URL。

location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
				//前进
				function toNext(){
					window.history.forward();
				}
		</script>
	</head>
	<body>
		<h1>第一个测试页面</h1>
		<a href="test1.html">连接到第一个测试页面</a><br>
		<input type="button" value="前进" onclick="toNext();"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
				//前进
				function toNext(){
					window.history.forward();
				}
				//后退
				function toBack(){
					window.history.back();
				}
		</script>
	</head>
	<body>
		<h1>第二个测试页面</h1>
		<a href="test2.html">连接到第三个测试页面</a><br>
		<input type="button" value="前进" onclick="toNext();"/>
		<input type="button" value="后退" onclick="toBack();"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
				//后退
				function toBack(){
					window.history.back();
				}
		</script>
	</head>
	<body>
		<h1>第三个测试页面</h1>
		<input type="button" value="后退" onclick="toBack();"/>
	</body>
</html>

注意:前进history.forward()和后退history.back()在同一个窗口中的页面才有效。

4. window Navigator--浏览器的信息

window.navigator 对象包含有关访问者浏览器的信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		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 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

setTimeout() - 暂停指定的毫秒数后执行指定的代码

setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval(“function”,milliseconds) 间隔指定的毫秒数不停地执行指定的代码。

参数1-指定的运行代码是一个function

参数2-指定的毫秒数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
            //javascript计时事件
            ///在一个设定的事件间隔之后来执行代码而不是在函数被调用后立即执行
            //setinterval() -间隔指定的毫秒数不停的执行指定的代码。
            //claerInterval(intervalVariable)方法用于停止setinterval()方法执行的函数代码
            window.onload=function(){
                var returnvalue;
                document.getElementById("but1").onclick=function(){
                    function getdate(){
                        var date1=new Date();
                        var datetime=date1.getFullYear()+"年"+
                            (date1.getMonth()+1)+"月"+
                            date1.getDate()+"日"+
                            date1.getHours()+":"+date1.getMinutes()+":"+date1.getSeconds();
                            document.getElementsByTagName("h1")[0].innerText=datetime
                    }
                    returnvalue=window.setInterval(function(){getdate();},1000);
                }
                document.getElementById("but2").onclick=function(){
                    window.clearInterval(returnvalue);
                }
            }
                //setTimeout() -  暂停指定的毫秒数后执行指定的代码[只执行一次]
           //clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
		</script>
	</head>
	<body>
        <input id="but1" type="button" value="开始计时"/>
        <input id="but2" type="button" value="停止计时"/>
        <h1></h1>
	</body>
</html>