浏览器对象模型BOM（Browser Object Model） 使JavaScript可以与浏览器进行对话

window

window对象

  • 它表示浏览器窗口
  • 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
  • 全局变量是window对象的属性
  • 全局函数是window对象的方法
  • 甚至HTML DOM的document也是window对象的属性之一

Window尺寸

有三种方法能够确定浏览器窗口的尺寸

  1. 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight浏览器窗口的内部高度，包括滚动条
window.innerWidth浏览器窗口的内部高度（包括滚动条）

  1. 对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

  1. document.body.clientHeight

document.body.clientWidth

  1. //实用的JavaScript方案，涵盖所有浏览器，包含IE8及以下版本的浏览器
  2. var w=window.innerWidth
  3. || document.documentElement.clientWidth
  4. || document.body.clientWidth;
  6. var h=window.innerHeight
  7. || document.documentElement.clientHeight
  8. || document.body.clientHeight;

其他的Window方法

  1. window.open()打开新窗口
  2. window.close()关闭当前窗口
  3. window.move()移动当前窗口
  4. window.resizeTo()调整当前窗口的尺寸

Window Screen

包含有关用户屏幕的信息

window.screen对象在编写时，可以不使用window这个前缀

  • screen.availWidth可用的屏幕宽度
  • screen.availHeight可用的屏幕高度

Window Screen 可用宽度

screen.availWidth属性返回访问者屏幕的宽度，减去界面特性，比如窗口任务栏

Window Screen 可用高度

screen.availHeight属性返回访问者屏幕的高度，同宽度

Window Location

用于获得当前页面的地址，并把浏览器重定向到新的页面

  • location.hostname返回web主机的域名
  • location.pathname返回当前页面的路径和文件
  • location.port返回web主机的端口（80或43）
  • location.protocol返回所使用的web协议（http：或 https）

    Window Location Href

    location.href返回当前页面的URL

Window Location Pathname

location.pathname返回URL的路径名
没有参数时，返回当前页面的路径名

Window Location Assign

location.assign加载一个新的文档
属性为一个可访问的地址

Window History

window.history 对象包含浏览器的历史

为了保护用户隐私，对JavaScript访问该对象的方法作出了限制

  • history.back()与在浏览器点击后退按钮相同
  • history.forward()与浏览器中点击向前按钮相同

history.back()

history.back()方法加载历史列表中的前一个URL，浏览器上的返回键

history.forward()

history.forward()方法加载历史列表中的下一个URL，浏览器上的前进键

history.go()

history.go()实现向前向后的功能，里面的参数表示跳转页面的个数

  • 参数为1 前进一个页面
  • 参数为-1 后退一个页面
  • 参数为0 刷新页面

Window Navigator

包含有关访问者浏览器的信息

  1. <script>
  2. txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
  3. txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
  4. txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
  5. txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
  6. txt+= "<p>硬件平台: " + navigator.platform + "</p>";
  7. txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
  8. txt+= "<p>用户代理语言: " + navigator.language + "</p>";
  9. document.getElementById("example").innerHTML=txt;
  10. </script>

注意：navigator对象的新的可被浏览器使用者更改、一些浏览器对测试站点会识别错误、浏览器无法报告晚于浏览器发布的新操作系统
，所以在尽量不要使用这个对象来检测浏览器版本

JavaScript 弹窗

可以在JavaScript中创建三种消息：警告框，确认框，提示框

警告框

警告框经常用于确保用户可以得到某些信息 当警告框出现后，用户需要点击确定按钮才能继续操作

window.alert("sometext");

确认框