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窗口关系及框架
|
||||||
总体来说没怎么看明白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/原创发布,未经允许禁止私自转载或抄袭!!!
js008-BOM的更多相关文章
- HTML BOM Browser对象
BOM:Browser Object Model,即浏览器对象模型,提供了独立于内容的.可以与浏览器窗口进行互动的对象结构. Browser对象:指BOM提供的多个对象,包括:Window.Navig ...
- 一步步学习javascript基础篇(7):BOM和DOM
一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
- BOM,DOM,ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- javascript学习之BOM
BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...
- BOM以及定时器
一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...
- js浏览器对象模型(BOM)
浏览器对象模型(Browser Object Model,BOM):浏览器为js提供的对象集合. 1 windows对象 windows对象:表示浏览器的框架以及与其相关的内容,比如滚动条和导航栏图标 ...
- BOM操作
BOM操作 //浏览器对象模型 opener=window.open(页面的url,打开方式) opener.document.body.style.background="red" ...
- 什么是BOM头,BOM头有什么影响,怎么去掉BOM头
什么是bom头? 在utf-8编码文件中BOM在文件头部,占用三个字节,用来标示该文件属于utf-8编码,现在已经有很多软件识别bom头,但是还有些不能识别bom头,比如PHP就不能识别bom头,这也 ...
- Txt格式配置表无法解析的问题——BOM
今天再次遇到同一个问题:策划给来一个Txt格式配置表,我用解析类去读取,返回的结果为空.解析类参数是:主键key,文件名fileName,错误提示errorTip. 写读取语句的时候,主键key我是直 ...
- BOM对象有哪些:
BOM对象有哪些: 1.window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性: 2.document对象,文档对象: 3.location对象,浏览器当前URL信息: 4 ...
随机推荐
- linux中级-JAVA企业级应用TOMCAT实战
1. Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共 ...
- springMvc全局异常处理
本文中只测试了:实现Spring的异常处理接口HandlerExceptionResolver 自定义自己的异常处理器 对已有代码没有入侵性等优点,同时,在异常处理时能获取导致出现异常的对象,有利于提 ...
- SpringMVC学习--文件上传
简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- ScrollView中嵌套ListView显示
想要ScrollView中嵌套显示ListView 需要自定义ListView 并重写onMeasure方法 重新计算 heightMeasureSpec的高度 int newHeight = Me ...
- dijkstra 最短路算法
最朴素的做法o(V*V/2+2E)~O(V^2)#include<iostream>using namespace std;#include<vector>#include&l ...
- dede使用方法---如何添加视频
根据客户的需求,需要上传客户自己的视频,但是发现一个视频就有一百多M,想到数据库总共可容纳的才一百多M,于是想到利用其他专业的视频网站,再嵌入到自己的网站里面. 我在这里选的是爱奇艺,下面总结一下主要 ...
- 第6届蓝桥杯javaA组第7题,牌型种数,一道简单的题带来的思考
题目: 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得到 ...
- 【转】ListView学习笔记(二)——ViewHolder
在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...
- 又爱又恨系列之枚举enum
其实枚举挺简单的,只不过以前没好好学,所以不知道这个东西,恩,现在梳理一下 整体而言,首先枚举是一个数据类型,这个数据类型和结构体有点像 可以分为三个层次 1.枚举数据类型定义 第一种:enum 枚举 ...