对BOM的总结
参考:JavaScript半知半解 TG著
BOM对象
Window对象是客户端JavaScript程序的全局对象。
Window对象使得JavaScript与浏览器进行交互。
所有的JavaScript全局对象,函数以及变量均自动成为window对象的属性和方法。
Document对象也是window对象的成员。
Window对象方法与浏览器交互的方法:
计时器
SetTimeOut()和SetInterval(),两个参数,一个是重复执行的代码,另外一个是重复的毫秒数,需要注意的是,这两个函数都会返回一个值,类似计时器ID,分别可以用clearTimeOut()与clearInterval()来取消执行。
注意:如果以0毫秒的超时时间来调用setTimeout(),那么指定的函数不会立刻执行。 相反,会把它放到队列中,等到前面处
于等待状态的事件处理程序全部执行完成后,再“立即”调用它。
浏览器的定位与导航
Window对象的location属性引用了Location对象,与document中的location属性引用的对象相同。它表示窗口中当前显示的文档的URL,并提供了方法来载入新的文档。
Location的功用是可以解析当前URL,分离出相关的信息,作为相关属性:当我们需要网址的时候:window.herf属性可以获取,同样的属性包括协议、主机、域名、端口。。等等根据需要查询文档。
需要注意的是以上属性都是可写的,在更改之后会按照我们更改的信息载入一个新的文档。
以上是属性部分,下面是location对象的一些方法:
location.assign() :使窗口载入并显示指定的URL中的文档。
location.replace() :和assign()方法类似,但它在载入新文档之前会从浏览历史中把当前文档删除。 这样“后退”按钮就不会把浏览器带回到原始文档。
location.reload() :重新载入当前文档,可传入一个布尔值为参数,默认false。 如果为true,则优先从服务器重新加载;否则优先从本地缓存中重新加载。
纯粹的片断标识符是相对URL的一种类型,它不会让浏览器载入新文档,而是使浏览器滚动到文档的某个位置。
注意:#top标识符是个特殊值:如果文档中没有元素的ID是“top”,它会让浏览器滚动到文档开始处。location = '#top'; //跳转到文档的顶部
浏览历史
Window对象的history属性引用的是该窗口的History对象:History对象是用来把窗口浏览历史用文档和文档状态列表的形式
表示。
History对象的length属性表示浏览历史表中的元素数量。 比如你在当前窗口访问了三个不同的网址,那么history.length就等于3
相关方法:
back():移动到上一个访问页面,等同于浏览器的后退键。
forward():移动到下一个访问页面,等同于浏览器的前进键。
go():接受一个整数作为参数,移动到该整数指定的页面,比如go(1)相当于forward(),go(-1)相当于back()。
如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是默默的失败
history.go(0)相当于刷新当前页面。
TUDO
浏览器相关信息
Window对象的navigator属性引用的是包含浏览器产商和版本信息的Navigator对象
属性:
appName:Web浏览器的全称
appVersion:此属性通常以数字开始,并跟着包含浏览器产商和版本信息的详细字符串。 字符串前面的数字通常是4.0或5.0,表示它是第4或第5代兼容的浏览器。
userAgent:属性返回浏览器的User-Agent字符串,标示浏览器的厂商和版本信息。 它包含了appVersion中的所有信息:
用此属性可以判断是否为手机浏览器,在哪个平台。//利用返回的数据根据正则表达式来判断。
Platform:返回操作系统信息
onLine:返回浏览器是否链接到网络
Geolocation:返回一个Geolocation对象,包含用户地理位置信息。
方法:
javaEnabled()javaEnabled方法返回一个布尔值,表示浏览器是否能运行Java Applet小程序。
cookieEnable()cookieEnabled方法返回一个布尔值,表示浏览器是否能储存Cookie。
浏览器屏幕相关信息
Window对象的screen属性引用的是Screen对象,它提供有关窗口显示的大小和可用的颜色数量的信息。
属性:
Width:整个屏幕宽度
Height:整个屏幕高度
availHeight,availWidth:返回屏幕可用的高度和宽度,单位为像素。 它们的值为屏幕的实际大小减去操作系统某些功能占据的空间,比如系统的任务栏
colorDepth:返回屏幕的颜色深度,一般为16(表示16-bit)或24(表示24-bit)。
对话框:。
alert() :向用户显示一条消息并等待用户关闭对话框。
confirm() :同样显示一条消息,要求用户单击“确认”或“取消”按钮,并返回一个布尔值。
prompt() :同样显示一条消息,等待用户输入字符串,并返回这个字符串。
这三个方法都具有堵塞效应,一旦弹出对话框,整个页面就是暂停执行,等待用户做出反应。
错误处理:
Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它,并把错误信息输出到浏览器的JavaScript控制台上。
多窗口和多窗体:
由于网页可以使用 <iframe> 嵌套多个网页,因此一个网页之中会形成多个窗口。 另一情况是,子网页之中又嵌入别的网页,形成多级窗口。 每个窗口的Window对象都是独立的,互不干扰。
浏览器提供了一些特殊变量,用来返回其他窗口。
top:顶层窗口, 即最上层的那个窗口
parent:父窗口
self:当前窗口, 即自身
下面的代码可以判断当前窗口是否是顶层窗口
window.top === window.self
与这些变量对应, 浏览器还提供一些特殊的窗口名, 供open方法、 `<a>`标签、 `<form>`标签等引用。
_top:顶层窗口
_parent:父窗口
_blank:新窗口
打开和关闭窗口:
使用Window对象的open()方法可以打开一个新的浏览器窗口。 Window.open()载入指定的URL到新的或已存在的窗口中,并
返回代表那个窗口的Window对象。
open方法一共可以接受四个参数。
第一个参数:字符串,表示新窗口的网址。 如果省略,默认网址就是 about:blank 。
第二个参数:字符串,表示新窗口的名字。 如果该名字的窗口已经存在,则跳到该窗口,不再新建窗口。 如果省略,就默认
使用_blank,表示新建一个没有名字的窗口。
第三个参数:字符串,内容为逗号分隔的键值对,表示新窗口的参数,比如有没有提示栏、 工具条等等。 如果省略,则默认
打开一个完整UI的新窗口。
第四个参数:布尔值,表示第一个参数指定的网址,是否应该替换history对象之中的当前网址记录,默认值为false。 显然,
这个参数只有在第二个参数指向已经存在的窗口时,才有意义。
window.close方法用于关闭当前窗口,一般用来关闭window.open方法新建的窗口。
modal.close();
窗体:
窗体是通过 <iframe> 元素创建的,我们可以像获取其他元素一样,获取一个表示 <iframe> 的元素对象,同时,
<iframe> 元素有 contentWindow 属性,引用该窗体的Window对象。
<iframe id='f'></iframe>
var f = document.getElementById('f');
var win = f.contentWindow; //子窗体的Window对象
var doc = f.contentDocument; //等同于f.contentWindow.document
//获取子窗体的变量和属性
f.funciton()
F.title
对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 ...
随机推荐
- 常用DOM API总结
一. 获取节点 1. 获取元素节点 getElementsById getElementsByTagName getElementsByClassName 2. 获取属性节点 getAttribute ...
- LUOGU P1291 [SHOI2002]百事世界杯之旅 (期望dp)
传送门 解题思路 期望$dp$.因为这个是期望步数,所以要倒着推.那么这道题就变得一脸可做了,设$f[i]$表示还有$i$张牌没有收集的期望,那么考虑再抽一张,有$(n-i)/n$的概率抽到抽过的牌, ...
- 安装Tengine和Tengine说明
什么是Tengine 官方帮助文档:http://tengine.taobao.org/nginx_docs/cn/ Tengine的安装 新建tengine用户组 groupadd -r n ...
- Error:【SLF4J: Class path contains multiple SLF4J bindings.】
ylbtech-Error:[SLF4J: Class path contains multiple SLF4J bindings.] 1.返回顶部 1. SLF4J: Class path cont ...
- centos7中给Elasticsearch5 安装bigdesk
系统:centos7 elasticsearch:5.2.2 安装步骤 步骤 由于elasticsearch不再建议支持插件的安装方式.建议作为独立的程序来安装类似于bigdesk.head. 以前都 ...
- 纯 CSS 实现实心三角形和空心三角形
一.实心三角形 1.代码 .div-angles{ width:; height:; border-style: solid; border-width:30px; border-color: tra ...
- Delphi版俄罗斯方块-前奏
前言 基础知识讲了很多,但是并没有串联起来,所以我最近一直在准备个小项目,但是这个项目的要求不含有数据库部分,也就是数据持久存储的功能,此外不能含有网络功能,它只是对基础知识的一个总结,最后一点是这个 ...
- 08_springmvc数据回显和@ModelAttribute注解详解
一.数据回显 提交后,如果出现错误,将刚才提交的数据回显到刚才的提交页面. 二.pojo数据回显方法 1.springmvc默认对pojo数据进行回显. pojo数据传入controller方法后,s ...
- python基础数据类型初始,用户交互
一.基础数据类型初始 1.数字:int 1,2,3 print(100,type(100)) ',type('100')) 查看数据类型的方法:type()函数 取值范围: int(整型) 在32位 ...
- 1、Zookeeper的功能以及工作原理
1.ZooKeeper是什么? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,它是集群的管理者,监视着集群中各个节点的状态根据节点提交 ...