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删除，如下：

 1 var age = 28;
 2 window.name = "Li Lei";
 3 window.sex = "male";
 4
 5 delete age;
 6 console.log(age); // 28
 7 delete window.age;
 8 console.log(window.age); // 28
 9
10 delete name;
11 console.log(window.name); // undefined
12
13 delete window.sex;
14 console.log(window.sex); // undefined

与框架的关系

如果页面中包含了框架，则每个框架都会带有自己的window对象，并且会保存到包含其页面window的frames属性中，可以通过索引或id访问到当前包含的对应框架的window对象。

同时被包含的框架，可以使用window.top属性访问到最顶级窗口（即浏览器窗口）的window对象，通过window.parent属性访问到包含当前页面的父级窗口的window对象，通过window.self访问到自身的window对象。

多个窗口之间只要不跨域（跨域问题后面的笔记会涉及），可以相互调用对方定义的属性及方法，如下：

A.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>A</title>
 6     <script src="a.js"></script>
 7 </head>
 8 <body>
 9     <p>A</p>
10     <input type="button" value="调用自己和其它框架的方法" onclick="AClick()">
11     <iframe name="frameB" src="./B.html" style="width: 90%;"></iframe>
12 </body>
13 </html>

a.js

 1 var aInfo = "A";
 2
 3 function showInfo_pageA() {
 4     console.log("This is page A print info!");
 5 }
 6
 7 function AClick() {
 8     console.log(window.aInfo); // A
 9     console.log(window.bInfo); // undefined
10     console.log(window.cInfo); // undefined
11
12     showInfo_pageA(); // This is page A print info!
13     top.frames.frameB.showInfo_pageB(); // This is page B print info!
14     top.frames.frameB.frameC.showInfo_pageC(); // This is page C print info!
15 }

B.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>B</title>
 6     <script src="b.js"></script>
 7 </head>
 8 <body bgcolor="#ff0000">
 9     <p>B</p>
10     <input type="button" value="调用自己和其它框架的方法" onclick="BClick()">
11     <iframe name="frameC" src="./C.html" style="width: 90%;"></iframe>
12 </body>
13 </html>

b.js

 1 var bInfo = "B";
 2
 3 function showInfo_pageB() {
 4     console.log("This is page B print info!");
 5 }
 6
 7 function BClick() {
 8     console.log(window.aInfo); // undefined
 9     console.log(window.bInfo); // B
10     console.log(window.cInfo); // undefined
11
12     top.showInfo_pageA(); // This is page A print info!
13     showInfo_pageB(); // This is page B print info!
14     self.frames.frameC.showInfo_pageC(); // This is page C print info!
15 }

C.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>C</title>
 6     <script src="c.js"></script>
 7 </head>
 8 <body bgcolor="#00ff00">
 9     <p>C</p>
10     <input type="button" value="调用自己和其它框架的方法" onclick="CClick()">
11 </body>
12 </html>

c.js

 1 var cInfo = "C";
 2
 3 function showInfo_pageC() {
 4     console.log("This is page C print info!");
 5 }
 6
 7 function CClick() {
 8     console.log(window.aInfo); // undefined
 9     console.log(window.bInfo); // undefined
10     console.log(window.cInfo); // C
11
12     self.top.showInfo_pageA(); // This is page A print info!
13     self.parent.showInfo_pageB(); // This is page B print info!
14     showInfo_pageC(); // This is page C print info!
15 }

从上面的例子来看，每个框架都会有一个自己的window对象且相互之间不会存在关联，即A定义的函数和属性不会出现在B中，而相互调用就需要使用到frames、top、parent及self属性。

窗口大小

window提供了获取窗口大小的属性：

  • outerWidth和outerHeight用来获取窗口的整个大小（包括浏览器菜单及外部边框的大小）；
  • innerWidth和innerHeight用来获取窗口的页面视图的大小（即HTML页面的可视区域的大小）；
  • resizeTo用来设定新的窗口大小；
  • resizeBy也一样，不过接收的参数会累加到当前的浏览器尺寸之上；

同时也提供浏览器窗口位置的设置和获取属性，可以自行搜索。

打开窗口

可以通过window.open方法来打开一个新窗口，注意a标签必须通过点击，而该方法则可以自动打开（比如一堆不正规网站的弹出窗口）。

该方法的详细信息可点击这里查看；

打开的窗口对象还存在调整位置尺寸及关闭的方法，如下：

1 var win = window.open("http://www.cnblogs.com/");
2 win.resizeTo(500, 500);
3 win.moveTo(100, 100);
4 setTimeout(function(){
5     win.close();
6 }, 1000);

但是要注意一点，一般的浏览器都会有弹出限制，比如Chrome浏览器默认是不允许open方法打开窗口的，需要自己设定为允许打开，否则open方法返回null，下一行会报错。

间隔调用和超时调用

在window对象中，提供了setTimeout（超时调用）和setInterval（间隔调用）两个方法，都会返回一个调用ID，可以用clearTimeout或者clearInterval传入调用ID来停止对应的调用，具体的示例可以看上一个，已经用到了setTimeout函数，指定代码在1秒后执行。

需要注意的是，这两个方法的域都是指向window的，所以要特别注意对this的处理，如下：

 1 var age = 0;
 2
 3 function Person() {
 4     this.age = 28;
 5     this.foo = function() {
 6         setTimeout(function(){
 7             this.age += 20;
 8         }, 500);
 9     };
10 }
11
12 var p = new Person();
13 p.foo();
14 setTimeout(function(){
15     console.log(p.age); // 28
16     console.log(age); // 20
17 }, 1000);

正确的做法如下：

 1 var age = 0;
 2
 3 function Person() {
 4     this.age = 28;
 5     this.foo = function() {
 6         var that = this;
 7         setTimeout(function(){
 8             that.age += 20;
 9         }, 500);
10     };
11 }
12
13 var p = new Person();
14 p.foo();
15 setTimeout(function(){
16     console.log(p.age); // 48
17     console.log(age); // 0
18 }, 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各个部分的值，可以这么写：

1 location.protocol; // ‘http‘
2 location.host; // ‘www.example.com‘
3 location.port; // ‘8080‘
4 location.pathname; // ‘/path/index.html‘
5 location.search; // ‘?a=1&b=2‘
6 location.hash; // ‘TOP‘

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

1 if (confirm(‘重新加载当前页‘ + location.href + ‘?‘)) {
2     location.reload();
3 } else {
4     location.assign(‘/discuss‘); // 设置一个新的URL地址
5 }

navigator

window对象下的一个属性，表示浏览器的信息，最常用的属性包括：

  • navigator.appName：浏览器名称；
  • navigator.appVersion：浏览器版本；
  • navigator.language：浏览器设置的语言；
  • navigator.platform：操作系统类型；
  • navigator.userAgent：浏览器设定的User-Agent字符串。
1 alert(‘appName = ‘ + navigator.appName + ‘\n‘ +
2       ‘appVersion = ‘ + navigator.appVersion + ‘\n‘ +
3       ‘language = ‘ + navigator.language + ‘\n‘ +
4       ‘platform = ‘ + navigator.platform + ‘\n‘ +
5       ‘userAgent = ‘ + navigator.userAgent);

请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：

1 var width;
2 if (getIEVersion(navigator.userAgent) < 9) {
3     width = document.body.clientWidth;
4 } else {
5     width = window.innerWidth;
6 }

但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用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数据：

1 <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
2     <dt>摩卡</dt>
3     <dd>热摩卡咖啡</dd>
4     <dt>酸奶</dt>
5     <dd>北京老酸奶</dd>
6     <dt>果汁</dt>
7     <dd>鲜榨苹果汁</dd>
8 </dl>

用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点：

 1 var menu = document.getElementById(‘drink-menu‘);
 2 var drinks = document.getElementsByTagName(‘dt‘);
 3 var i, s, menu, drinks;
 4
 5 menu = document.getElementById(‘drink-menu‘);
 6 menu.tagName; // ‘DL‘
 7
 8 drinks = document.getElementsByTagName(‘dt‘);
 9 s = ‘提供的饮料有:‘;
10 for (i=0; i<drinks.length; i++) {
11     s = s + drinks[i].innerHTML + ‘,‘;
12 }
13 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代码是允许的：

1 <!-- 当前页面在wwwexample.com -->
2 <html>
3     <head>
4         <script src="http://www.foo.com/jquery.js"></script>
5     </head>
6     ...
7 </html>

如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。

为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

时间： 2024-10-26 06:26:36

HTML5学习笔记（二十一）：BOM的相关文章

马哥学习笔记二十一——LVS DR模型

kernel parameter: arp_ignore: 定义接收到ARP请求时的响应级别: 0:只要本地配置的有相应地址,就给予响应: 1:仅在请求的目标地址配置请求到达的接口上的时候,才给予响应: arp_announce:定义将自己地址向外通告时的通告级别: 0:将本地任何接口上的任何地址向外通告: 1:试图仅向目标网络通告与其网络匹配的地址: 2:仅向与本地接口上地址匹配的网络进行通告: curl命令选项: --cacert <file> CA证书 (SSL) --capath &l

（转）【D3D11游戏编程】学习笔记二十一：Cube Mapping及其应用之一：天空盒的实现

(注:[D3D11游戏编程]学习笔记系列由CSDN作者BonChoix所写,转载请注明出处:http://blog.csdn.net/BonChoix,谢谢~) 这一节讨论有关纹理映射的进阶内容:Cube Mapping. 1. 简介 单从名字上,就大概可以看出点端倪了,翻译成中文为立方体映射,因此肯定跟立方体有关系.确实,Cube Mapping就是使用六张正方形的图片来进行纹理映射的.这六张图片分别对应了一个立方体中的六个面.由于这个立方体是轴对齐的,因此每个面可以用坐标系中的六个轴方向来惟

kvm虚拟化学习笔记(二十一)之KVM性能优化学习笔记

本学习笔记系列都是采用CentOS6.x操作系统,KVM虚拟机的管理也是采用virsh方式,网上的很多的文章都基于ubuntu高版本内核下,KVM的一些新的特性支持更好,本文只是记录了CentOS6.x系列操作系统下KVM优化的点,有很多都是默认支持开启了的,除了采用virtio方式的磁盘IO,与网络IO接口优化之外,其它真是无需太多优化. 1. CPU性能优化 (1) 服务器或宿主机主板BIOS中开启Intel Virtualization Technology(简称VT), 如果主板支持In

Android学习笔记二十一.使用ContentProvider实现数据共享(四).操作系统(联系人)的ContentProvider

Android系统本身提供了大量的ContentProvider,例如联系人信息.系统的多媒体信息等,我们开发的应用程序主要是通过ContentResolver来调用系统的ContentProvider提供的query().insert().update()和delete()方法来获取Android内部的数据. 一.如何使用ContentResolver操作系统ContentProvider暴露的内部数据? 1.调用Activity的getContentResolver()获取ContentRe

Java基础学习笔记二十一 多线程

多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线程:线程是进程中的一个执行单元,负责当前进程中程序的执行,一个进程中至少有一个线程.一个进程中是可以有多个线程的,这个应用程序也可以称之为多线程程序. 简而言之:一个程序运行后至少有一个进程,一个进程中可以包含多个线程 什么是多线程呢?即就是一个程序中有多个线程在同时执行.通过下图来区别单线程程序与

Linux学习笔记&lt;二十一&gt;——busybox制作小系统

制作流程: kernel->initrd(busybox)->rootfs(busybox) kernel:直接利用/boot/vmlinuz-`uname -r`内核镜像或手动编译生成 initrd:编译busybox,在busybox的基础上建立initrd rootfs:同样在busybox的基础上建立rootfs 一.为小系统上的新硬盘建立分区并挂载在宿主机的相应目录,以便创建修改文件. /dev/hda1    100M    boot分区    挂载在/mnt/boot /dev/

HTML5学习笔记(二)

HTML5表单提交和PHP环境搭建 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML格式化</title> </head> <body> <form> 用户名: <input type="text"> <br/> 密码: <input type=&

过滤器(web基础学习笔记二十一)

一.过滤器简介 二.在Eclipse中创建过滤器 三.使用过滤器设置全部web字符编码 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // TODO Auto-generated method stub // place your code here // pass the reques

[傅里叶变换及其应用学习笔记] 二十一. 离散傅里叶变换的矩阵定义，一些性质

DFT在零点 $\underline{\mathcal{F}}\underline{f}(0) = \displaystyle{ \sum_{n=0}^{N-1}\underline{f}[n]e^{-2\pi i\frac{n0}{N}} = \sum_{n=0}^{N-1}\underline{f}[n] }$ 还记得傅里叶变换在零点处也有类似的式子 $\mathcal{F}f(0) = \displaystyle{ \int_{-\infty}^{\infty}f(t)e^{-2\pi i

西门子PLC学习笔记二十一-（中断处理二）

1.循环中断 循环中断组织块用于按一定时间间隔循环执行中断程序,例如周期性地定时执行某一段程序,间隔时间从STOP切换到RUN模式时开始计算. 循环中断组织块OB30~OB38默认的时间间隔和中断优先级如表所示.CPU318只能使用OB32和OB35,其余的S7-300CPU只能使用OB35.S7-400CPU可以使用的循环中断OB的个数与CPU型号有关. 循环中断组织块的时间间隔.优先级.OB号表如下: 示例:在I0.0的上升沿时启动OB35对应的循环中断,在I0.1的上升沿禁止OB35对应的