1.JS BOM简介（浏览器对象模型）
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
Window对象表示浏览器中打开的窗口。
所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JS简单学习</title> </head> <body> <p id="demo"></p> <script type="text/javascript"> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"; </script> </body> </html>
2.Window对象实例
2.2 Window对象方法
2.3 实例一：显示带有一段消息以及确认按钮和取消按钮的对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>点击按钮，显示确认框。</p> <button type="button" onclick="myFunction()">点我</button> <p id="demo"></p> <script type="text/javascript"> function myFunction() { var x; var r=confirm("按下按钮!"); if(r==true) { x="你按下了\"确定\"按钮!"; }else { x="你按下了\"取消\"按钮!"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>点击按钮查看输入的对话框。</p> <button type="button" onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() { var x; var person=prompt("请输入你的名字","JS BOM"); if(person!=null && person!="") { x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; } } </script> </body> </html>
2.5 实例三：打开一个新的浏览器窗口或查找一个已命名的窗口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <form> <input type="button" value="打开新窗口" onclick="openWindow()"/> </form> <script type="text/javascript"> function openWindow() { window.open("https://www.baidu.com"); //可以打开多个窗口 //window.open("https://www.tencent.com"); //可以控制打开窗口的外观 //window.open("https://www.baidu.com","_blank","toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=400"); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <input type="button" value="打开新窗口" onclick="openWindow()" /> <input type="button" value="关闭新窗口" onclick="closeWindow()" /> <script type="text/javascript"> function openWindow() { myWindow=window.open("","","width=200,height=100"); myWindow.document.write("<p>这是我的窗口。</p>"); myWindow.focus(); } function closeWindow() { myWindow.close(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <input type="button" value="打开新窗口" onclick="openWindow()" /> <input type="button" value="关闭新窗口" onclick="closeWindow()" /> <br /><br /> <input type="button" value="该窗口被关闭了吗？" onclick="checkWindow()" /> <br /> <div id="demo"></div> <script type="text/javascript"> var myWindow; function openWindow() { myWindow=window.open("","","width=400,height=200"); } function closeWindow() { if(myWindow) { myWindow.close(); } } function checkWindow() { if(!myWindow) { document.getElementById("demo").innerHTML="我的窗口没有被打开!"; }else { if(myWindow.closed) { document.getElementById("demo").innerHTML="我的窗口被关闭!"; }else { document.getElementById("demo").innerHTML="我的窗口没有被关闭!"; } } } </script> </body> </html>
2.8 实例六：用setTimeout() 和 clearTimeout() 设置和停止定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> <script type="text/javascript"> var c=0; var t; var time_is_on=false; function timesCount() { document.getElementById("txt").value=c; c=c+1; t=setTimeout(function() {timesCount()},1000); } function startTime() { if(!time_is_on) { time_is_on=true; timesCount(); } } function stopTime() { clearTimeout(t); time_is_on=false; } </script> </head> <body> <form> <input type="button" value="开始计数!" onclick="startTime()"/> <input type="text" id="txt" /> <input type="button" value="停止计数!" onclick="stopTime()"/> </form> <p> 单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。 </p> </body> </html>
写在结尾：由于JS BOM中Window对象的实例有很多，在这里只是举几个简单的例子，大家可以自行使用Window对象中的方法、属性来应用学习。
