JavaScript学习笔记之BOM对象
浏览器对象模型（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: undefined3、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对象的更多相关文章
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- JavaScript:学习笔记(10)——XMLHttpRequest对象
JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...
- Javascript学习笔记——操作浏览器对象
Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...
- javascript学习笔记02--面向对象学习
js面向对象编程 1. javascript 是一种基于对象的编程 object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...
- JavaScript学习笔记之原型对象
本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习笔记之BOM
BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空 ...
- JavaScript学习笔记(13)——BOM
1.window 所有浏览器都支持window对象,它表示浏览器窗口本身. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属 ...
- 1.4（JavaScript学习笔记） window对象的属性及方法
一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...
随机推荐
- Codeforces Round #311 (Div. 2)A Ilya and Diplomas
[比赛链接]click here~~ [题目大意] n个人,获取一到三等文凭,每门文凭有大小范围.求最后文凭各颁发多少 [解题思路]直接枚举了, 看完题,赶紧写了一发代码,发现竟然错过注冊时间.系统提 ...
- java的PrintStream(打印输出流)详解（java_io）
java的PrintStream(打印输出流)详解(java_io) 本章介绍PrintStream以及 它与DataOutputStream的区别.我们先对PrintStream有个大致认识,然后再 ...
- IDEA Spark Streaming Kafka数据源-Producer
import java.util import org.apache.kafka.clients.producer.{KafkaProducer, ProducerConfig, ProducerRe ...
- Linux基本命令 文件管理 下部
1.1 移动文件 将/data目录移动到/root下 涉及命令mv [root@oldboyedu-50 ~]# mv /data/ /root/ 移动 [root@oldboyedu-50 ~]# ...
- maven的pom.xml文件错误
来自:http://www.cnblogs.com/shihujiang/p/3492864.html
- Knights of the Round Table(Tarjan+奇圈)
http://poj.org/problem?id=2942 题意:n个武士,某些武士之间相互仇视,如果在一起容易发生争斗事件.所以他们只有满足一定的条件才能参加圆桌会议:(1)相互仇视的两个武士不能 ...
- HTML--使用下拉列表框，节省空间
下拉列表在网页中也常会用到,它可以有效的节省网页空间.既可以单选.又可以多选.如下代码: 讲解: 1.value: 2.selected="selected": 设置selecte ...
- jmeter中对于各类时间格式的设置
最普通的设置为使用 函数助手中的__time, 设置好需要使用的类型,并设置接收参数即可 YMD = yyyyMMdd HMS = HHmmss YMDHMS = yyyyMMdd-HHmmss 第二 ...
- Unity学习-摄像机的使用（六）
快速对齐摄像机 [选择摄像机-GameObject-Align With View] Game模板中显示的界面,就是摄像机拍摄后的画面 本次学习案例 添加一个地形,一个点光源,三个Cube 了解摄 ...
- V3的普通窗体控件的使用
1.文本: 属性: 标签对齐方式: Left Right Center 值对齐方式: Left Right Center 事件: 值改变事件 值加载事件 单击标题事件 键盘按下事件 获得焦点事 ...