js008-BOM

js008-BOM

本章内容:

1、理解window对象-BOM的核心

2、控制窗口、框架和弹出窗口

3、利用location对象中的页面信息

4、使用navigation对象了解浏览器

ECMAScript是JavaScript的核心。BOM(浏览器对象模型)才是JavaScript真正的核心。

8.1 window对象

BOM核心对象是window,表示浏览器的一个实例。

 

8.1.1全局作用域

由于window对象也是ECMAScript种的global对象的角色,所以所有全局作用域中声明的变量,函数都会变成window对象的属性和方法。如:


var age = 29;

function sayAge(){

alert(this.age);

}

alert(window.age);

sayAge();

window. sayAge ();


结果都是29.。


var age = 29;

window.color = "red";

//在IE< 9时抛出错误,其他浏览器都返回false

delete window.age;

//在IE< 9时抛出错误,其他浏览器都返回true

delete window.color;   //true

alert(window.age);   //29

alert(window.color);   //undefined


定义全局变量和在window对象上直接定义属性有差别:全局变量不能通过delete操作符删除,而直接在window对象上直接定义的属性可以。

使用var定义的window属性有个[[configurable]]的特性,其默认值为false,所以不能用delete删除


//抛出错误

var newValue = oldvalue;

//不会抛出错误,这只是一次属性查询

//newValue的值是Undefined

var newValue = window.oldvalue;


尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个为生命的变量是否存在

8.1.2窗口关系及框架


window.frames[0];

window.frames["topframe"];

top.frame[0];

top.frames["topframe"];

frame[0];

frames["topframe"];


window.frames[1];

window.frames["leftframe"];

top.frame[1];

top.frames["leftframe"];

frame[1];

frames["leftframe"];


window.frames[2];

window.frames["rightframe"];

top.frame[2];

top.frames["rightframe"];

frame[2];

frames["rightframe"];

总体来说没怎么看明白parent这个东西。

8.1.3窗口位置

用来修改window对象位置。如IE、Safari、Opera、Chrome提供的 screenLeft和screenTop。Firefox的screenX和screenY,Safari、Chrome也支持这连个属性。


下列代码可以跨浏览器去的窗口左边和上边的位置


var leftPos = (typeof window.screenLeft == "number") ?

window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == "number") ?

window.screenTop : window.screenY;


//将窗口移动到屏幕左上角

window.moveTo(0 , 0);

//将窗口向下移动100px

window.moveBy(0 ,100);

//将窗口移动到(200 , 300)

window.moveTo(200 , 300);

//将窗口向左移动50px

window.moveBy(-50 ,0);


使用moveTo()  moveBy()方法可能将窗口精确的移动到一个新位置。这两个方法都接收两个参数。其中moveTo()就收的是新位置的x和y值。

moveBy()接收的是在水平和垂直方向上移动的像素数。

这两个方法会被浏览器禁用 ,不适用与框架。只能对最外层的window对象使用。

8.1.4窗口大小

可以取得可视窗口大小的属性:clinetWidth和clinetHeight

调整浏览器窗口的大小的方法:resizeTo()和resizeBy()。用法和前面的moveTo(), moveBy()用法一样。同样不适用框架,只能在window最外层使用,同样会被浏览器禁用。

8.1.5导航和打开窗口

使用window.open()方法。可接收四个参数:要加载的URL(通常指使用第一个)、窗口目标、一个特性字符串和一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值(打不开页面时使用)。

1、弹出窗口

2、安全限制

3、弹出窗口屏蔽程序

8.1.6间歇调用和超时调用

JS是单线程语言

超时调用需要使用window对此昂的setTimeou()方法,接收两个参数:要执行的代码(最好不要是字符串)和以毫秒表示的时间

8.1.7系统对话框

通过alert()  confirm()  prompt()方法可以调用系统对话框向用户显示消息。

8.2 location对象

location对象是最有用的BOM对象之一,它提供了一些导航功能,也提供了与当前窗口中加载的文档有关的信息。它是一个很特别的对象,既是window对象的属性也是document对象的属性。所以window.location 和 document.location引用的是同一个对象

以下为location对象的所有属性


属性名


例子


说明


hash


“#contents”


返回URL中的hash(#后面跟0个或多个字符),如果URL中不包含散列,则返回空字符串


host


“www.wrox.com:80”


返回服务器和端口号(如果有)


hostname


“www.wrox.com”


返回服务器名称(不带端口号)


href


“http:/ www.wrox.com”


返回当前加载页面的完整URL,location对象的toString()方法也返回这个值


pathname


“/WileyCDA/”


返回URL中的目录和(或)文件名


port


“8080”


返回URL中指定的端口号,如果没有端口号,返回控制符串


protocol


“http:”


返回页面使用的协议


search


“?q=javascript”


返回URL的查询字符串,以?开头

8.2.1查询字符串参数

8.2.2位置操作

使用location对象来改变浏览器的位置,最常用的方法是assign()方法,并为其传递一个URL.

location.assign(“http:/ www.wrox.com”);

8.3 navifator对象

8.3.1检测插件

检测浏览器中是否安装了特定的插件是最常见的检测历程。在IE中可以用plugins数组拉埃达到这个目的。该数组中的每一项都包含下列属性。

1、  name:插件名称

2、  description:插件描述

3、  filename:插件的文件名

4、  length:插件做出的MIME类型数量

在IE中检测插件的为方式就是使用转悠的ActiveXObject类型,并尝试创建一个热定插件的实例

8.3.2注册处理程序

Firefox 为navigator对象新增了registerContentHander()和registerProtocolHander()方法。这两个方法可以让一个站点执行它可以处理特定类型的信息。

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

8.4 screen对象

一个在js变成中用处不大的对象,基本上只用来表明客户端的能力。

8.5 history对象

该对象保存着用户上网的历史记录。从窗口被打开的那一刻起。history是window对象的属性。

使用go()方法可以在用户的历史记录中任意跳转。可以向前向后。


history.go(1);


history.back();


//后退一页


history.go(1);


history.forward()


//前进一页

声明:本博客为http://www.cnblogs.com/lal-fighting/原创发布,未经允许禁止私自转载或抄袭!!!

时间: 2024-10-24 00:40:01

js008-BOM的相关文章

诡异的json包含bom头

今日项目碰到 bom头跑错 Exception in thread "main" com.fasterxml.jackson.core.JsonParseException: Unexpected character ('' (code 65279 / 0xfeff)): expected a valid value (number, String, array, object, 'true', 'false' or 'null') at [Source: {"state&q

BOM

Q:BOM是什么? A:"浏览器对象模型".是Web中使用JS的核心.(而ECMAScript是JavaScript的核心). Q:window对象与全局变量有差别吗? A:全局变量不能通过delete操作符删除,而直接在windows对象上的定义的属性可以. var age = 29; window.color = "red"; delete window.age; //age不是全局变量,false delete window.color; //true ale

DOM_04之常用对象及BOM

1.添加:①var a=document.createElement("a"):②设置关键属性:③将元素添加到DOM树:a.parent.appendChild(a):b.parent.insertBefore(a,old):c.parent.replaceChlid(a,old): 2.优化:尽量少的操作DOM树,①如果同时添加父元素与子元素,应在内存中先将子元素拼到父元素下,再将父元素添加到DOM树:②如果添加多个平级子元素,应先将所有子元素放入文档片段,再将文档片段一次性添加到D

关于JSON解析的深坑之BOM头

    前言:在我们对Json字符串进行处理时,往往会碰到这个问题org.json.JSONException: Value of type java.lang.String cannot be converted to JSONObject,解析服务器返回的Json串时,JSONObject对象抛出了这个异常.其实这是返回的Json字符串含有BOM头导致的. 本人手拙,写的不好.望各位大虾见谅!!! 什么是JSON?  JSON(JavaScript Object Notation) 是一种轻

BOM和DOM

BOM 浏览器对象模型 BOM中的对象 Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口 History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能 Location对象:指地址栏,通过属性的方法控制页面的跳转 Document对象:指网页中的内容,通过属性和方法控制页面元素 1.Window对象的常用方法: open(); close(); alert(); prompt(); confim(); setTimeout

BOM和DOM自己的一些小观点和认识

BOM主要针对的是浏览器的操作,常用的也就是五个对象:window对象 location对象 navigation对象 screen对象和history对象 window对象主要讲的就是对浏览器的一些操作,有一些常用的方法,比如alert comfirm prompt方法. location对象英文翻译过来就是位置对象,那么顾名思义就是对位置和偏移量之间的操作. navigation对象就好像一个导航的东西,告诉你一些URL里面的知识,和获取浏览器当前页面完整URL的一些信息. screen就是

xpages开发的bom管理系统

domino对流程设计是方便的,如果制作复杂逻辑的应用就难了,但是还是可以实现的,以前的一个bom管理系统,刚开始想使用java的ssh来做,后来为了统一平台,还是使用domino来做,经过长时间的研究终于出来了,这是使用xpages来做的,当然使用domino的form来做同样没有问题的,因为数据结构一样的,思路差不多,由于使用xpags已经久了,就不再使用form的web来做了.以下是界面,分享一下,以便给大家信心!

JSONP / DOM / BOM 部分总结

#JSONP 跨域请求 JSONP原理:通过动态创建script标签,利用其scr跨域的属性,访问其他域的服务器,请求数据并通过回调函数返回请求的结果 20:26 2017/7/13 突然发现在记事本按F5可以自动写出当前日期和时间,美滋滋 1.递归函数应该始终使用arguments.callee来递归的调用自身. 不要使用函数名 (函数名可能会发生变化)2.匿名函数 也叫 拉姆达函数3.关于闭包的作用域: 闭包的作用域链包含着它自己的作用域. 包含函数的作用域和全局作用域 通常,函数的作用域及

ALVtree 显示BOM结构

REPORT  z_barry_alv_tree1_bom MESSAGE-ID oo. TABLES: stpox.INCLUDE <icon>. CLASS: cl_gui_column_tree DEFINITION LOAD,       cl_gui_cfw DEFINITION LOAD . DATA: tree1  TYPE REF TO cl_gui_alv_tree ,      mr_toolbar TYPE REF TO cl_gui_toolbar . DATA: gs

BOM之history对象

前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进.本文将详细介绍BOM中的history对象 length history.length属性保存着历史记录的URL数量.初始时,该值为1.如果当前窗口先后访问了三个网址,history.length属性等于3 由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 histor