《javascript高级程序设计》笔记(八)

BOM(浏览器对象模型)

一、window对象

BOM的核心对象是window,它表示浏览器的一个实例。网页定义的任何一个对象、变量和函数,都以window作为其Global 对象,有权访问parseInt()等方法。

1.全局作用域

所有在全局作用域声明的变量、函数都会成为window对象的属性和方法。

全局变量不能通过delete操作符删除,直接在window对象上的定义的属性可以(IE8及之前版本会抛出错误)。通过查询window对象,可以知道某个可能未声明的变量是否存在。

通过查询window对象可以知道某个可能未声明对变量是否存在。

//会抛出错误
var newValue = oldValue;

//属性查询
var newValue = window.oldValue; //undefined

2.窗口关系及框架

如果页面有框架,则它们都有自己的window对象,并保存在frames集合。frames集合中通过数值索引(从左到右,从上到下)或名称来访问window对象。

top对象始终指向最外层框架。对于在一个框架中编写的任何代码来说,其中的window对象指向的都是那个框架的特定实例。

parent对象始终指向当前框架的直接上层框架。在没有框架时候,parent=top=window。

self对象始终指向window,可以和window对象互换。

除非最高层窗口是通过window.open()打开,否则其window对象的name属性不包含任何值。

3.窗口位置

IE、Safari、Opera和Chrome:screenLeft和screenTop属性。从屏幕左边和上边到由window对象表示的页面可见区域的距离。

Firefox:screenX和screenY,整个浏览器相对于屏幕的坐标值。

Firefox、Safari和Chrome始终返回页面中每个框架的top.screenX和top.screenY,即使页面设置了外边距。

IE和Opera会给出框架相对屏幕界面的精确坐标。

moveTo()接收的是新位置的x,y坐标,moveBy()接收的是移动像素数。但可能被浏览器禁用,都不适用于框架,只对最外层的window对象用。

4.窗口大小

outerWidth、outerHeight:IE9+、Safari和Firefox返回浏览器窗口本身的尺寸。

Opera里表示单个标签页的大小。

innerWidth、innerHeight:表示该容器中页面视图区的大小(减去边框宽度)。

chrome中inner与outer均返回视口大小。

//页面视口大小 var pageWidth = window.innerWidth,
     pageHeight = window.innerHeight;

        if (typeof pageWidth != "number"){
            if (document.compatMode == "CSS1Compat"){//确定页面是否处于标准状态。
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }

IE、Firefox、Safari、Opera、Chrome里docoment.documentElement.clientWidth和docoment.documentElement.clientHeight保存页面窗口的信息。IE6的混杂模式要通过document.body.clientWidth。

resizeTo()和resizeBy()方法:调整浏览器窗口的大小,但可能被浏览器禁用。

5.导航和打开窗口

window.open():导航到一个指定的URL,也可以打开一个新的浏览器窗口。

参数:加载的URL,窗口目标,特性字符串,表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

①弹出窗口

第二个参数不符合则根据第三个参数创建新窗口或新标签页。

close()方法只适用于通过window.open()打开的弹出窗口。

②安全限制

③弹出窗口屏蔽程序

如果浏览器内置的屏蔽程序阻止弹窗,window.open()会返回null

浏览器扩展或其他程序阻止弹窗,window.open()会抛出错误。需要在检测返回值同时对window.open()调用封装在try-catch里。

        var blocked = false;

        try {
            var wroxWin = window.open("http://www.wrox.com", "_blank");
            if (wroxWin == null){
                blocked = true;
            }
        } catch (ex){
            blocked = true;
        }

        if (blocked){
            alert("The popup was blocked!");
        }

6.间歇调用和超时调用

超时调用:setTmeout(函数,等待时间的毫秒数)。javascript是单线程序的解析器,经过该事件后代码不一定执行。

取消:clearTimeout()。

超时调用的代码都在全局作用域执行。

间歇调用:setInterval()

取消:clearInterval()

一般认为使用超时调用来 模拟间歇调用是最佳模式。

7.系统对话框

alert():警告框。

confirm()确认框。

prompt():提示框,参数:显示的文本提示和文本输入域的默认值。

window.print():打印对话框

window.find():查找对话框

二、location对象

location提供了当前窗口加载的文档有关的信息,还提供了一些导航功能。它既是window对象的属性,也是docoment对象的属性。

1.查询字符串参数

location.search返回从问号到URL末尾的所有内容。

2.位置操作

asign方法:立即打开新URL并在浏览器生成历史记录。location.href或window.location也会调用这方法。

location对象的属性也可以改变当前加载的页面如hash、search、hostname、pathname、port。(IE早期版本,hash属性不会在用户单击后退前进时被更新,只在单击包含hash的URL时才更新)

replace()方法回导致浏览器位置改变,但不会在历史记录生成新纪录,用户不能回到前一个页面。

reload()重新加载当前显示的页面。reload方法调用后可能不执行(取决于网络延迟等因素),最好将reload()放在代码最后一行。

三、navigator对象

识别客户端浏览器的事件标准,每个浏览器的navigator对象都有一套自己的属性。

1.检测插件

对非IE,可以用plugins数组,数组每一项都包含下列属性。

name:插件名字

description:插件描述

filename:插件文件名

length:插件所处理的MIME类型数量

        //检测插件(非IE无效)        function hasPlugin(name){
            name = name.toLowerCase();
            for (var i=0; i < navigator.plugins.length; i++){
                if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                    return true;
                }
            }

            return false;
        }
        //IE检测插件
        function hasIEPlugin(name){
            try {
                new ActiveXObject(name);
                return true;
            } catch (ex){
                return false;
            }
        }

IE检测插件的唯一方法是ActiveXObject类型,并尝试穿件一个特定插件的实例,要用COM标识符检测。用try-catch实例化是因为创建未知COM对象会抛出错误。

典型的做法是针对每个插件分别创建检测函数。

       //检测Flash
        function hasFlash(){
            var result = hasPlugin("Flash");
            if (!result){
                result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
            }
            return result;
        }

2.注册处理程序

registerContentHandler()和registerProtocolHandler()方法可以让一个站点指明它可以处理特定类型的信息。

registerContentHandler()接收三个参数:要处理的MIME类型,可以处理该MIME类型的页面的URL,应用程序的名称。

四、screen对象

基本只用来表明客户端的能力,包括浏览器窗口外部的显示器的信息。

五、history对象

保存着用户上网的历史记录,开发人员无法得知用户浏览过的URL,但可以实现前进和后退。

go()方法接收一个整数值,正数表示向前跳转,负数表示向后跳转;也可以传递一个字符串参数,浏览器会跳转到历史记录中包含该字符串的第一个位置。

back()和forward()方法也可以前进后退。

length属性保存着历史记录的数量。

时间: 2024-11-02 23:33:11

《javascript高级程序设计》笔记(八)的相关文章

javascript高级程序设计——笔记

javascript高级程序设计--笔记 基本概念 基本数据类型包括Undefined/Null/Boolean/Number和String 无须指定函数的返回值,实际上,未指定返回值的函数返回的是一个特殊的undefined值 变量.作用域和内存问题 基本类型值在内存中占据固定大小的空间,因此保存在栈内存中 引用类型的值是对象,保存在堆内存中 确定一个值是哪种基本类型用typeof,确定一个值是哪种引用用instanceof 所有变量都存在于一个执行环境当中,这个执行环境决定了变量的生命周期,

javascript高级程序设计笔记1

最近在看javascript高级程序设计,看之前觉得自己的js学得还不错,然后,看了没几页就觉得自己好像没有学过一样,这主要写写我以前不完全了解的一些知识. 首先是关于基本数据类型的,从Number开始,以前经常用parseInt来转换数值,看过书才知道,这个函数的本意是专门用于把字符串转换成数值,而且以前也不知道它具体是怎么一个转换规则.先来看看Number()函数的转换规则: 1.如果是Boolean 值,true 和false 将分别被转换为1 和0.2.如果是数字值,只是简单的传入和返回

javascript高级程序设计笔记(第5章 引用类型)

1.Object类型 两种方式定义:对象字面量.new 两种方式访问:括号.点 2.Array类型 2.1  定义方式:new Array.数组字面量 2.2  lenght属性:可以利用它方便的想数组末尾添加元素 2.3  检测数组 instanceof isArray()方法  2.4  toString().soLocaleString().valueOf().join()方法 2.5.栈方法   push()方法:逐个添加到数组末尾,并返回修改后的数组长度 pop()方法:返回数组的最后

【javascript高级程序设计笔记】第六章OOP

忙了一段时间,加了将近一个月的班. 书也落下没看,上次看到第七章(这部分笔记大概还是9月份的吧),偶尔看到很吃力.看的速度慢下来. 学习就是一个慢慢积累慢慢沉淀的过程.看书时没有明显觉得提升.但在看完书后近段时间工作中写代码,明显感觉效率还是有提升,基础知识牢固了. 这本书是第二次看,这次很认真的遍读和做笔记,笔记的文字均是自己边看边敲的,这样才更好的真正的吸收到一部分吧! 这些天在看web响应式设计:HTML5和CSS3实战 第6章 面向对像的程序设计 6.1.1属性类型 ECMAScript

JavaScript高级程序设计笔记之面向对象

说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,JavaScript中如何面向对象? JavaScript中将对象定义为:一组无序的 键值对的集合,属性以及方法的名称就是键,键的值可以是任何类型(字符串,数字,函数--) 在JavaScript中,所有对象继承自Object,所有对象继承自Object,所有对象继承自Object! 创建 1  简单创建

javascript高级程序设计笔记(第7章 函数表达式)

7.5 小结 在JavaScript 编程中,函数表达式是一种非常有用的技术.使用函数表达式可以无须对函数命名,从而实现动态编程.匿名函数,也称为拉姆达函数,是一种使用JavaScript 函数的强大方式.以下总结了函数表达式的特点.? 函数表达式不同于函数声明.函数声明要求有名字,但函数表达式不需要.没有名字的函数表达式也叫做匿名函数.? 在无法确定如何引用函数的情况下,递归函数就会变得比较复杂:? 递归函数应该始终使用arguments.callee 来递归地调用自身,不要使用函数名——函数

【javascript高级程序设计笔记】第一章与第三章

第1章 javascript简介 1.2Javascript实现 一个完整的javascript实现由下列三个不同的部分组成 核心(ECMAScript) 提供核心语言功能 文档对象模型(DOM) 提供访问和操作网页内容的方法和接口 浏览器对象模型(BOM)提供与浏览器交互的方法和接口 ECMAScript 它规定了这门语言的下列组成部分: 语法  类型  语句  关键字 保留字 操作符 对象 ECMA-262第5版,发布于2009年. 文档对象模型(DOM) Document Object M

JavaScript高级程序设计笔记

1.1 JavaScript简史 <script> async/defer可以控制js加载顺序 把js文件放在页面底部,加快页面打开速度 3 基本概念 语法 数据类型 流控制语句 理解函数 3.4 数据类型 ECMAScript中定义了六种数据类型:Underfined.Null.Boolean.Number.String.Object 使用typeof关键字来检测类型 //Boolean()转换 var bool1 = Boolean(true); var bool2 = Boolean(&

javascript高级程序设计--笔记01

概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型(BOM)  一套提供了与浏览器交互的API ECMAScript仅仅定义了这门语言的基础,如定义了:语法.类型.语句.关键字等,实际上这门语言本身不包含输入输出定义. 而现实中,ECMAScript大多借用了某些宿主环境(如web浏览器,Node,Adobe Flash)来实现丰富的功能,这些宿主环

javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记

1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获:指不太具体的节点应该更早接收到事件,而具体的节点应该是最后接收到事件. 4.DOM事件流:“DOM2级事件”规定的事件流包含三个阶段:事件捕获,处于目标阶段和事件冒泡阶段.(实际的目标元素在捕获阶段接不会收到事件) IE不支持DOM事件流,Opera.safari.chrome.firefox支持