HTML5学习笔记（二十一）：BOM
BOM(Browser Object Model) 是指浏览器对象模型。
由于最初JavaScript就是设计在浏览器中执行的脚本语言，所以BOM是浏览器提供给JavaScript操作自身的接口。
window
BOM的核心对象是window对象，window对象表示一个浏览器的一个页面窗口对象。
同时window对象也是ECMAScript定义的Global对象，即网页中定义的全局属性或者全局方法最终都是定义到该对象上，同时提供JS的Global的方法如parseInt方法。
全局作用域
定义的全局变量都会加到window对象之上，但是通过var定义的不能使用delete删除，而通过window.xxx定义的可以使用delete删除，如下：
var age = 28;
window.name = "Li Lei";
window.sex = "male"; delete age;
console.log(age); //
delete window.age;
console.log(window.age); // delete name;
console.log(window.name); // undefined delete window.sex;
console.log(window.sex); // undefined
与框架的关系
如果页面中包含了框架，则每个框架都会带有自己的window对象，并且会保存到包含其页面window的frames属性中，可以通过索引或id访问到当前包含的对应框架的window对象。
同时被包含的框架，可以使用window.top属性访问到最顶级窗口（即浏览器窗口）的window对象，通过window.parent属性访问到包含当前页面的父级窗口的window对象，通过window.self访问到自身的window对象。
多个窗口之间只要不跨域（跨域问题后面的笔记会涉及），可以相互调用对方定义的属性及方法，如下：
A.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
<script src="a.js"></script>
</head>
<body>
<p>A</p>
<input type="button" value="调用自己和其它框架的方法" onclick="AClick()">
<iframe name="frameB" src="./B.html" style="width: 90%;"></iframe>
</body>
</html>
a.js
var aInfo = "A";
function showInfo_pageA() {
console.log("This is page A print info!");
}
function AClick() {
console.log(window.aInfo); // A
console.log(window.bInfo); // undefined
console.log(window.cInfo); // undefined
showInfo_pageA(); // This is page A print info!
top.frames.frameB.showInfo_pageB(); // This is page B print info!
top.frames.frameB.frameC.showInfo_pageC(); // This is page C print info!
}
B.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B</title>
<script src="b.js"></script>
</head>
<body bgcolor="#ff0000">
<p>B</p>
<input type="button" value="调用自己和其它框架的方法" onclick="BClick()">
<iframe name="frameC" src="./C.html" style="width: 90%;"></iframe>
</body>
</html>
b.js
var bInfo = "B";
function showInfo_pageB() {
console.log("This is page B print info!");
}
function BClick() {
console.log(window.aInfo); // undefined
console.log(window.bInfo); // B
console.log(window.cInfo); // undefined
top.showInfo_pageA(); // This is page A print info!
showInfo_pageB(); // This is page B print info!
self.frames.frameC.showInfo_pageC(); // This is page C print info!
}
C.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>C</title>
<script src="c.js"></script>
</head>
<body bgcolor="#00ff00">
<p>C</p>
<input type="button" value="调用自己和其它框架的方法" onclick="CClick()">
</body>
</html>
c.js
var cInfo = "C";
function showInfo_pageC() {
console.log("This is page C print info!");
}
function CClick() {
console.log(window.aInfo); // undefined
console.log(window.bInfo); // undefined
console.log(window.cInfo); // C
self.top.showInfo_pageA(); // This is page A print info!
self.parent.showInfo_pageB(); // This is page B print info!
showInfo_pageC(); // This is page C print info!
}
从上面的例子来看，每个框架都会有一个自己的window对象且相互之间不会存在关联，即A定义的函数和属性不会出现在B中，而相互调用就需要使用到frames、top、parent及self属性。
窗口大小
window提供了获取窗口大小的属性：
- outerWidth和outerHeight用来获取窗口的整个大小（包括浏览器菜单及外部边框的大小）；
- innerWidth和innerHeight用来获取窗口的页面视图的大小（即HTML页面的可视区域的大小）；
- resizeTo用来设定新的窗口大小；
- resizeBy也一样，不过接收的参数会累加到当前的浏览器尺寸之上；
同时也提供浏览器窗口位置的设置和获取属性，可以自行搜索。
打开窗口
可以通过window.open方法来打开一个新窗口，注意a标签必须通过点击，而该方法则可以自动打开（比如一堆不正规网站的弹出窗口）。
该方法的详细信息可点击这里查看；
打开的窗口对象还存在调整位置尺寸及关闭的方法，如下：
var win = window.open("http://www.cnblogs.com/");
win.resizeTo(500, 500);
win.moveTo(100, 100);
setTimeout(function(){
win.close();
}, 1000);
但是要注意一点，一般的浏览器都会有弹出限制，比如Chrome浏览器默认是不允许open方法打开窗口的，需要自己设定为允许打开，否则open方法返回null，下一行会报错。
间隔调用和超时调用
在window对象中，提供了setTimeout（超时调用）和setInterval（间隔调用）两个方法，都会返回一个调用ID，可以用clearTimeout或者clearInterval传入调用ID来停止对应的调用，具体的示例可以看上一个，已经用到了setTimeout函数，指定代码在1秒后执行。
需要注意的是，这两个方法的域都是指向window的，所以要特别注意对this的处理，如下：
var age = 0;
function Person() {
this.age = 28;
this.foo = function() {
setTimeout(function(){
this.age += 20;
}, 500);
};
}
var p = new Person();
p.foo();
setTimeout(function(){
console.log(p.age); //
console.log(age); //
}, 1000);
正确的做法如下：
var age = 0;
function Person() {
this.age = 28;
this.foo = function() {
var that = this;
setTimeout(function(){
that.age += 20;
}, 500);
};
}
var p = new Person();
p.foo();
setTimeout(function(){
console.log(p.age); //
console.log(age); //
}, 1000);
详情可以参考闭包的笔记。
另外由于JS是单线程运行的，所以执行时间不会真的按照设定的时间那么精准的执行，比如你设定的时间是1秒后执行，但是接下来有一个耗时3秒的运行，那么实际超时调用执行时间是3秒之后才会调用。
系统对话框
浏览器还提供了3种系统对话框供JS调用：
alert
一般的提示框，点击这里查看详请。
confirm
带有确定取消的询问框，点击这里查看详请。
prompt
带有确定取消和输入栏的询问框，点击这里查看详请。
location
window对象下的一个属性，表示当前页面的URL信息。例如，一个完整的URL：
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href获取。要获得URL各个部分的值，可以这么写：
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
if (confirm('重新加载当前页' + location.href + '?')) {
location.reload();
} else {
location.assign('/discuss'); // 设置一个新的URL地址
}
navigator
window对象下的一个属性，表示浏览器的信息，最常用的属性包括：
- navigator.appName：浏览器名称；
- navigator.appVersion：浏览器版本；
- navigator.language：浏览器设置的语言；
- navigator.platform：操作系统类型；
- navigator.userAgent：浏览器设定的User-Agent字符串。
alert('appName = ' + navigator.appName + '\n' +
'appVersion = ' + navigator.appVersion + '\n' +
'language = ' + navigator.language + '\n' +
'platform = ' + navigator.platform + '\n' +
'userAgent = ' + navigator.userAgent);
请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：
var width;
if (getIEVersion(navigator.userAgent) < 9) {
width = document.body.clientWidth;
} else {
width = window.innerWidth;
}
但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：
var width = window.innerWidth || document.body.clientWidth;
screen
window对象下的一个属性，表示屏幕的信息，常用的属性有：
- screen.width：屏幕宽度，以像素为单位；
- screen.height：屏幕高度，以像素为单位；
- screen.colorDepth：返回颜色位数，如8、16、24。
history
window对象下的一个属性，history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。
这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。
新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。
任何情况，你都不应该使用history这个对象了。
document
window对象下的一个属性，表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
关于DOM我们会在接下来的几个笔记中纤细了解，这里大致了解下document对象。
document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变：
document.title = '努力学习JavaScript!';
要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。
我们先准备HTML数据：
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
<dt>摩卡</dt>
<dd>热摩卡咖啡</dd>
<dt>酸奶</dt>
<dd>北京老酸奶</dd>
<dt>果汁</dt>
<dd>鲜榨苹果汁</dd>
</dl>
用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点：
var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;
menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'
drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {
s = s + drinks[i].innerHTML + ',';
}
alert(s);
document对象还有一个cookie属性，可以获取当前页面的Cookie。
Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。
Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。
JavaScript可以通过document.cookie读取到当前页面的Cookie：
document.cookie; // 'v=123; remember=true; prefer=zh'
由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：
<!-- 当前页面在wwwexample.com -->
<html>
<head>
<script src="http://www.foo.com/jquery.js"></script>
</head>
...
</html>
如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。
为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。
为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。
HTML5学习笔记（二十一）：BOM的更多相关文章
- python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法
python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...
- (C/C++学习笔记) 二十一. 异常处理
二十一. 异常处理 ● 异常的概念 程序的错误通常包括:语法错误.逻辑错误.运行异常. 语法错误指书写的程序语句不合乎编译器的语法规则,这种错误在编译.连接时由编译器指出. 逻辑错误是指程序能顺利运行 ...
- Java基础学习笔记二十一 多线程
多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...
- HTML5学习笔记二 HTML基础
一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...
- HTML5学习笔记 二：article和section
在HTML5中,article可以看做特殊种类的section,它比section更强调独立性. section元素强调分段或分块,而article强调独立性: 如果一块内容相对独立.完整,应该使用a ...
- HTML5学习笔记<二>:元素,属性,格式化
HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签 <p> this is my web page </p> 没有内容的 HT ...
- HTML5学习笔记（十一）：JavaScript基础
JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中: <head> <script> alert('He ...
- 过滤器(web基础学习笔记二十一)
一.过滤器简介 二.在Eclipse中创建过滤器 三.使用过滤器设置全部web字符编码 public void doFilter(ServletRequest request, ServletResp ...
- Java学习笔记二十一:Java面向对象的三大特性之继承
Java面向对象的三大特性之继承 一:继承的概念: 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方 ...
- PHP学习笔记二十一【全局变量】
<?PHP //定义全局变量 global $a; $a=9; //给全局变量赋值 function test1() { global $a; $a=45; } test1(); echo $a ...
随机推荐
- 浅谈Spring的PropertyPlaceholderConfigurer
大型项目中,我们往往会对我们的系统的配置信息进行统一管理,一般做法是将配置信息配置与一个cfg.properties的文件中,然后在我们系统初始化的时候,系统自动读取cfg.properties配置文 ...
- 由一次 symbol lookup error 引发的思考
开发一个跨平台的项目的时候,大部分时候都是在VS下进行编码,所以也就使用了VS的解决方案来管理项目. 因为要跨平台,当时网上看scons这个工具不错,所以在linux下就使用了scons来作为编译脚本 ...
- 【note】EtherCAT Configurator 使用之主菜单介绍
EtherCAT配置器是一个工具,用于配置EtherCAT总线. 工具管理一个或多个EtherCAT主设备和连接到该主站的EtherCAT从站.配置的设备能够脱机或能够通过扫描EtherCAT现场总线 ...
- centos7 修改中文字符集 How to avoid having to `export LC_ALL=“zh_CN.UTF-8”` upon each SSH connection
Each time I SSH to my Fedora Server, the locale setting is not right. $ locale locale: Cannot set LC ...
- Docker 技巧：删除 Docker 所有镜像
删除所有未运行 Docker 容器 docker rm $(docker ps -a -q) 删除所有 Docker 镜像 删除所有未打 tag 的镜像 docker rmi $(docker ima ...
- ios中Pldatabase的用法(4)
封装成DAO@implementation SqlHelper +(BOOL)InsertSql:(NSString *)sql paramet:(NSMutableDictionary *)parm ...
- iOS热更新技术被苹果官方警告？涉及到RN、Weex、JSPatch
本文为转载文章 故事背景: 这两天,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术 ...
- 十五分钟介绍 Redis数据结构
下面是一个对Redis官方文档<A fifteen minute introduction to Redis data types>一文的翻译,如其题目所言,此文目的在于让一个初学者能通过 ...
- UNIX 家族及Linux
Unix成长为一个非私有的操作系统,是因为1956年的AT&T公司受命于联邦去经营电报电话服务.当然也可以开发软件,甚至那个软件可以有”合理”收费的许可证,但是这个公司却被禁止从事任何和计算机 ...
- jQuery Chosen 使用
jQuery Chosen 使用 1. jQuery Chosen 选择框下拉值重置: 1 2 3 4 //重置 $("#easySelBrands").val(" ...