1.32 JavaScript的BOM（二）
即 浏览器对象模型(Browser Object Model)
浏览器对象包括
一、Window(窗口)
如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验。
1 <script> 2 <!--通过window对象可以获取文档显示区域的高度和宽度--> 3 document.write("文档内容"); 4 document.write("文档显示区域的宽度"+window.innerWidth); 5 document.write("<br>"); 6 document.write("文档显示区域的高度"+window.innerHeight); 7 <!--部窗体即浏览器，可能用的是360，火狐，IE, Chrome--> 8 document.write("浏览器的宽度:"+window.outerWidth); 9 document.write("<br>"); 10 document.write("浏览器的高度:"+window.outerHeight); 11 <!--window的open方法做到打开另一个网站，在没有告知用户的前提下就打开一个新的网站会影响用户的体验--> 12 function openNewWindow(){ 13 myWindow=window.open("/"); 14 } 15 </script> 16 <button onclick="openNewWindow()">打开一个新的窗口</button>
二、Navigator(浏览器)
提供浏览器相关的信息
<script type="text/javascript"> document.write("<p>浏览器产品名称："); document.write(navigator.appName + "</p>"); document.write("<p>浏览器版本号："); document.write(navigator.appVersion + "</p>"); document.write("<p>浏览器内部代码："); document.write(navigator.appCodeName + "</p>"); document.write("<p>操作系统："); document.write(navigator.platform + "</p>"); document.write("<p>是否启用Cookies："); document.write(navigator.cookieEnabled + "</p>"); document.write("<p>浏览器的用户代理报头："); document.write(navigator.userAgent + "</p>"); </script>
三、Screen (客户端屏幕)
<html> <body> <script type="text/javascript"> document.write("用户的屏幕分辨率: ") document.write(screen.width + "*" + screen.height) document.write("<br />") document.write("可用区域大小: ") document.write(screen.availWidth + "*" + screen.availHeight) document.write("<br />") </script> </body> </html>
四、History(访问历史)
<button onclick="goBack()">返回</button> <script> function goBack() { history.go(-2); //-1表示上次,默认，-2表示上上次，以次类推 } </script> <button onclick="goBack()">返回上上次</button>
五、Location(浏览器地址)
<span>当前时间:</span> <script> var d = new Date(); document.write(d.getHours()); document.write(":"); document.write(d.getMinutes()); document.write(":"); document.write(d.getSeconds()); document.write(":"); document.write(d.getMilliseconds()); //reload方法刷新当前页面 function refresh(){ location.reload(); } //跳转到另一个页面 function jump(){ //方法1 //location="/"; //方法2 location.assign("/"); } </script> <br> <button onclick="refresh()">刷新当前页面</button> <br> <button onclick="jump()">跳转到首页</button>
其他属性（端口号、主机名等）
<script> function p(s){ document.write(s); document.write("<br>"); } p("协议 location.protocol:"+location.protocol); p("主机名 location.hostname:"+location.hostname); p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port); p("主机加端口号 location.host: "+location.host); p("访问的路径 location.pathname: "+location.pathname); p("锚点 location.hash: "+location.hash); p("参数列表 location.search: "+location.search); </script>
六、弹出框
1、alert弹出框
2、confirm确认对话框
3、prompt输入对话框
<script> //1.alert弹出框 function register(){ alert("注册成功"); } //2.确认对话框 function del(){ var d = confirm("是否要删除"); alert(typeof d + " " + d); } //3.输入对话框 function p(){ var name = prompt("请输入用户名:"); alert("您输入的用户名是:" + name); } </script> <br> <button onclick="register()">注册</button> <br> <button onclick="del()">删除</button> <br> <button onclick="p()">请输入用户名</button>