浏览器对象模型（Browser Object Model，BOM）使 JavaScript 可以与浏览器进行交互，以下介绍浏览器对象模型中常用的对象

1、Window

window 对象表示浏览器窗口，全局变量是 window 对象的属性，全局函数是 window 对象的方法

（1）属性

引用

  • self：对当前窗口的引用
  • parent：对父窗口的引用
  • opener：对创建当前窗口的窗口的引用
  • document：对 Document 对象的只读引用
  • screen：对 Screen 对象的只读引用
  • location：对 Location 对象的只读引用
  • history：对 History 对象的只读引用
  • navigator：对 Navigator 对象的只读引用

宽度高度

  • innerHeight：浏览器窗口的内部高度（文档显示区的高度）
  • innerWidth：浏览器窗口的内部宽度（文档显示区的宽度）
  • outerheight：浏览器窗口的外部高度
  • outerwidth：浏览器窗口的外部宽度

其它

  • closed：窗口是否已被关闭
  • name：窗口的名称
  • defaultStatus：窗口状态栏中的默认文本
  • length：窗口中的框架数量

（2）方法

窗口操作

  • open()：打开新窗口
  • close()：关闭当前窗口
  • moveTo()：把窗口的左上角移动到指定的坐标
  • moveBy()：按照指定的像素移动窗口的位置
  • resizeTo()：把窗口的大小调整到指定的宽度和高度
  • resizeBy()：按照指定的像素调整窗口的大小
  • scrollTo()：把内容滚动到指定的坐标
  • scrollBy()：按照指定的像素滚动内容

消息框

  • alert()：创建警告框，用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续操作
alert("提示信息");
  • confirm()：创建确认框，用于确保用户可以得到或验证某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续操作。如果用户点击确认，那么返回值为 true；如果用户点击取消，那么返回值为 false
confirm("提示信息");
  • prompt()：创建提示框，用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或者取消按钮才能继续操作。如果用户点击确认，那么返回值为输入值；如果用户点击取消，那么返回值为 null
prompt("提示信息","默认文本");

计时事件

  • setInterval()：按照指定的周期来调用函数或计算表达式
  • clearInterval()：取消由 setInterval() 设置的 interval
  • setTimeout()：按照指定的时间来调用函数或计算表达式
  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout
<html>
    <head>
        <script type="text/javascript">
            var x;
            function set() { x = setTimeout("alert('倒计时已到')",5000) }
            function clear() { clearTimeout(x); }
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="开始倒计时(5秒)" onClick="set()">
            <input type="button" value="取消倒计时" onClick="clear()">
        </form>
    </body>
</html>

焦点

  • focus()：把键盘焦点给予一个窗口
  • blur()：把键盘焦点从顶层窗口移开

2、Window Screen

window.screen 对象（可以简写为 screen 对象）包含屏幕的信息

（1）属性

宽度高度

  • width：显示器屏幕的宽度

  • height：显示器屏幕的高度

  • availWidth：可用屏幕的宽度

  • availHeight：可用屏幕的高度

document.write("width: " + screen.width + "<br />");
document.write("height: " + screen.height + "<br />");
document.write("availWidth: " + screen.availWidth + "<br />");
document.write("availHeight: " + screen.availHeight + "<br />");

// width: 1536
// height: 864
// availWidth: 1536
// availHeight: 824

屏幕显示

  • bufferDepth：调色板的比特深度
  • colorDepth：调色板的比特深度
  • pixelDepth：屏幕的颜色分辨率
  • updateInterval：屏幕的刷新率
  • deviceXDPI：显示屏幕的每英寸水平点数
  • deviceYDPI：显示屏幕的每英寸垂直点数
  • logicalXDPI：显示屏幕每英寸的水平方向的常规点数
  • logicalYDPI：显示屏幕每英寸的垂直方向的常规点数
document.write("bufferDepth: " + screen.bufferDepth + "<br />");
document.write("colorDepth: " + screen.colorDepth + "<br />");
document.write("pixelDepth: " + screen.pixelDepth + "<br />");
document.write("updateInterval: " + screen.updateInterval + "<br />");
document.write("deviceXDPI: " + screen.deviceXDPI + "<br />");
document.write("deviceYDPI: " + screen.deviceYDPI + "<br />");
document.write("logicalXDPI: " + screen.logicalXDPI + "<br />");
document.write("logicalYDPI: " + screen.logicalYDPI + "<br />");

// bufferDepth: undefined
// colorDepth: 24
// pixelDepth: 24
// updateInterval: undefined
// deviceXDPI: undefined
// deviceYDPI: undefined
// logicalXDPI: undefined
// logicalYDPI: undefined

3、Window Location

window.location 对象（可以简写为 location 对象）包含 URL 的信息

（1）属性

  • href：当前页面的 URL
  • protocol：当前 URL 的协议

  • host：当前 URL 的主机名 和 端口号

  • hostname：当前 URL 的主机名
  • port：当前 URL 的端口号
  • pathname：当前 URL 的路径
  • search：从问号（?）开始的 URL（查询）

  • hash：从井号（#）开始的 URL（锚）

（2）方法

  • reload()：重新加载当前文档
  • assign(URL)：加载新的文档
  • replace()：用新的文档替换当前文档

4、Window History

window.history 对象（可以简写为 history 对象）包含浏览器的历史

（1）属性

  • length：浏览器历史列表中的 URL 数量

（2）方法

  • back()：加载 history 列表中的前一个 URL
  • forward()：加载 history 列表中的下一个 URL
  • go()：加载 history 列表中指定的 URL

5、Window Navigator

window.navigator 对象（可以简写为 navigator 对象）包含有关访问者浏览器的信息

（1）集合

  • plugins[]：对文档中所有嵌入式对象的引用

（2）属性

  • appCodeName：浏览器的代码名

  • appName：浏览器的名称

  • appVersion：浏览器的版本
  • appMinorVersion：浏览器的次级版本
  • browserLanguage：浏览器的语言

  • cpuClass：浏览器的 CPU 等级

  • cookieEnabled：浏览器是否启用 cookie
  • userAgent：User-Agent Header

  • onLine：系统是否处于脱机模式

  • platform：运行浏览器的操作系统平台

  • systemLanguage：操作系统平台使用的默认语言

  • userLanguage：操作系统平台的自然语言设置

document.write("appCodeName: " + navigator.appCodeName + "<br />");
document.write("appName: " + navigator.appName + "<br />");
document.write("appVersion: " + navigator.appVersion + "<br />");
document.write("appMinorVersion: " + navigator.appMinorVersion + "<br />");
document.write("browserLanguage: " + navigator.browserLanguage + "<br />");
document.write("cpuClass: " + navigator.cpuClass + "<br />");
document.write("cookieEnabled: " + navigator.cookieEnabled + "<br />");
document.write("userAgent: " + navigator.userAgent + "<br />");
document.write("onLine: " + navigator.onLine + "<br />");
document.write("platform: " + navigator.Platform + "<br />");
document.write("systemLanguage: " + navigator.systemLanguage + "<br />");
document.write("userLanguage: " + navigator.userLanguage + "<br />");

// appCodeName: Mozilla
// appName: Netscape
// appVersion: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
// appMinorVersion: undefined
// browserLanguage: undefined
// cpuClass: undefined
// cookieEnabled: true
// userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
// onLine: true
// platform: undefined
// systemLanguage: undefined
// userLanguage: undefined

但是来自 navigator 对象的信息具有误导性，这是因为：

  • navigator 数据可被浏览器使用者更改
  • 浏览器无法报告晚于浏览器发布的新操作系统

（3）方法

  • javaEnabled()：浏览器是否启用 Java
  • taintEnabled()：浏览器是否启用数据污点

参考资料：

http://www.w3school.com.cn/js/index.asp

http://www.w3school.com.cn/jsref/index.asp

JavaScript学习笔记之BOM对象的更多相关文章

  1. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  2. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  3. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  4. javascript学习笔记02--面向对象学习

    js面向对象编程 1.  javascript 是一种基于对象的编程    object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...

  5. JavaScript学习笔记之原型对象

    本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...

  6. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  7. JavaScript学习笔记之BOM

    BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空 ...

  8. JavaScript学习笔记(13)——BOM

    1.window 所有浏览器都支持window对象,它表示浏览器窗口本身. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属 ...

  9. 1.4（JavaScript学习笔记） window对象的属性及方法

    一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...

随机推荐

  1. WPF学习笔记：获取ListBox的选中项

    有代码有J8: UI <UserControl x:Class="UnitViews.UserListUV" xmlns="http://schemas.micro ...

  2. [Unity UGUI]ScrollRect效果大全

    UGUI各种优化效果 本文所实现的UGUI效果需求如下: - 支持缩放滑动效果 - 支持动态缩放循环加载 - 支持大数据固定Item复用加载 - 支持不用Mask遮罩无限循环加载 - 支持Object ...

  3. Selenium中配置链接使用FTP服务

    Enable the default report solution Step1: Create a suite listener and add codes into it, please watc ...

  4. B4197 [Noi2015]寿司晚宴 状压dp

    这个题一开始想到了唯一分解定理,然后状压.但是显然数组开不下,后来想到每个数(n<500)大于19的素因子只可能有一个,所以直接单独存就行了. 然后正常状压dp就很好搞了. 题干: Descri ...

  5. jeesite ckeditor数据库 HTML 被编码 的问题解决

    public abstract class BaseController { /** * 初始化数据绑定 * 1. 将所有传递进来的String进行HTML编码,防止XSS攻击 * 2. 将字段中Da ...

  6. P4049 [JSOI2007]合金

    传送门 我数学可能白学了-- 因为三个数加起来等于\(1\),那么只要用前两个数就能表示,那么就能把每一种金属看成一个二维向量.考虑只有两个向量的时候,设这两个向量为\(a,b\),那么一个向量\(c ...

  7. [Apple开发者帐户帮助]九、参考（4）支持的功能（macOS）

    macOS应用程序可用的功能取决于您的程序成员身份和签名证书. 能力 ADP 开发者ID Apple开发者 应用程序组 App沙盒 游戏中心     硬化运行时 iCloud:CloudKit   i ...

  8. Java命名规范（新手宝典）

    很多刚开始学习Java的童鞋都不知道如何命名类文件,方法名,字段名,常量名等,今天抽出时间整理了了一下.大佬绕过 Java命名的组成规则:英文大小写字母,数字,$和_. 这里有几点需要注意: 不能以数 ...

  9. Flume特点

    Flume 特点 1.可靠性 当节点出现故障时,日志能够被传送到其他节点上而不会丢失. Flume提供了三种级别的可靠性保障,从强到弱依次分别为: (1)  end-to-end(收到数据agent首 ...

  10. Jquery音频播放插件下载地址（有Html、JS、CSS、音频）

    有详细的html文件.全部JS代码文件.Css样式文件.测试音频资料 音频播放插件下载链接(百度云): http://pan.baidu.com/s/1pKC904F 提取码评论留邮箱发送,谢谢!