JavaScript BOM

BOM简介

BOM即浏览器对象模型(Brower Object Model)
浏览器对象包括 :
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)

Window对象

获取文档显示区域的高度和宽度
一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度

<script>
  document.write("文档内容");
  document.write("文档显示区域的宽度"+window.innerWidth);
  document.write("<br>");
  document.write("文档显示区域的高度"+window.innerHeight);
</script>

获取外部窗体的宽度和高度
所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome等等。

<script> 
  document.write("浏览器的宽度:"+window.outerWidth);
  document.write("<br>");
  document.write("浏览器的高度:"+window.outerHeight);
</script>

打开一个新的窗口
有的时候，你碰到一些网站会自动打开另一个网站，那么是怎么做到的呢?
就是通过window的open方法做到的
不建议使用，如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验

<script>
function openNewWindow(){
  myWindow=window.open("/");
}
</script>
<button onclick="openNewWindow()">打开一个新的窗口</button>

Navigator对象

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

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

History用于记录访问历史

返回上一次的访问

<script>
function goBack()
  {
     history.back();
  }
</script>
<button onclick="goBack()">返回</button>

返回上n次的访问

<script>
function goBack()
  {
     history.go(-2); //-1表示上次，-2表示上上次，以次类推
  }
</script>
<button onclick="goBack()">返回上上次</button>

Location对象

刷新当前页面
reload方法刷新当前页面

<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());
function refresh(){
  location.reload();
}
</script>
<button onclick="refresh()">刷新当前页面</button>

跳转到另一个页面

<script>
function jump(){
  //方法1
  //location="/"; 
  //方法2
  location.assign("/");   
}
</script>
<button onclick="jump()">跳转到首页</button>

Location的其他属性

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

弹出框

警告框 alert

<script>
function register(){
   alert("注册成功");
}
</script>
<button onclick="register()">注册</button>

确认框 confirm
确认框 confirm，常用于危险性操作的确认提示。比如删除一条记录的时候，弹出确认框
confirm返回基本类型的Boolean true或者false

<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>
<button onclick="del()">删除</button>

输入框 prompt
输入框 prompt，用于弹出一个输入框，供用户输入相关信息。因为弹出的界面并不好看，很有可能和网站的风格不一致，所以很少会在实际工作中用到。

<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
<button onclick="p()">请输入用户名</button>

计时器

setTimeout 只执行一次

<script>
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s; 
}
function showTimeIn3Seconds(){
   setTimeout(printTime,3000);  
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

setInterval 不停地重复执行

<p>每隔1秒钟，打印当前时间</p>   
<div id="time"></div>   
<script>   
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;   
}   
var t = setInterval(printTime,1000);  
</script>
<br><br>

clearInterval 终止重复执行
通过clearInterval终止一个不断重复的任务
本例，当秒是5的倍数的时候，就停止执行

<p>每隔1秒钟，打印当前时间</p>   
<div id="time"></div> 
<script> 
var t = setInterval(printTime,1000);
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  if(s%5==0)
     clearInterval(t);
}
</script>
<br>