javascript之BOM对象(一window对象)
javascript包含三个部分,ECMAScript,BOM和DOM。ECMAScript是javascript的核心,包含javascript的基础语法。在Web中使用javascript,BOM则是集成在Javascript的关于浏览器的部分。BOM提供了很多对象用于访问浏览器的功能,这些功能与网页内容无关。
一、window对象
BOM的核心对象是window,他表示一个浏览器的实例。在浏览器中,window担任两个角色,window既是javascript访问浏览器窗口的一个接口,同时又是ECMAScript中的Global对象。ECMAScript可以用于不同的环境,不仅仅局限于浏览器,为了是ECMAScript能够作为浏览器的脚本语言使用,采用window来代替其中的Global对象。
1、全局作用域
由于window同时扮演者ECMAScript中Global对象的角色,所以在全局作用域中声明的变量,函数都会变成window对象的变量和方法
var age=29;
function sayAge()
{
alert(this.age);
}
alert(window.age);//
sayAge();//
window.sayAge();//
由于是全局作用域,所以this代替的就是window。
全局变量是不能通过delete删除的,但是在window对象上定义的属性是可以被删除的。如下所示
window.color="red";
delete window.age;//出错
delete window.color;//正确
这是因为直接定义的变量的【Configurable】属性的值为false,而通过window对象定义的属性【Configurable】属性的值为true。
2、窗口关系及框架
如果页面中包含框架,则每个框架都有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引或者框架名称来访问相应的window对象。每个window对象都有一个name属性,其中包含框架的名称。
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="yetanotherframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
在上面有三个框架,其中一个框架居上,两个框架在下面,可以通过window.frames[0]或者window.frames[“topFrame”]来引用上方的框架。当然最常用的还是用top对象来引用,即top.frames[0]的结果为topFrame。top对象始终指向的是最高最外层框架,即浏览器窗口。
与top对象对应的就是parent对象,parent对象始终指向当前框架的直接上层框架。在没有框架的情况下top=parent=window.
yetanotherframe.html内容如下
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
<frame src="red.htm" name="redFrame">
<frame src="blue.htm" name="blueFrame">
</frameset>
</html>
如果代码位于red.html或者blue.html中的话,parent对象指的就是rightFrame框架。
最后一个对象就是self,它始终指向的是window对象,可以和window对象互换使用。
这些对象都是window对象的属性,可以通过window.parent等来访问。
在使用框架的情况下,浏览器中会存在多个Global对象,每个框架中定义的全局变量和方法会成为框架中的window的属性和方法
3、导航和打开窗口
window.open()方法既可以导航到一个特定的url,同时也可以打开一个新的浏览器窗口。该方法可以接受4个参数,分别为要加载的url,窗口目标,一个特性字符串和一个表示新页面是否取代浏览器历史中当前加载页面的布尔值。通常只需传递一个参数。
window.open("http://www.baidu.com");
这行代码会在浏览器新打开一个标签页,转到其中的url
如果添加了第二个参数,而且该参数是已存在的窗口或者框架的名称,那么就会在该窗口打开这个url;如果该参数不是已存在的窗口或者框架的名称,那么就会创建一个新的窗口或者框架用来打开其中的url。一般情况下打开的是框架,在Chrome中打开的是一个新标签页。
如果window.open()接收了三个参数,如果第二个参数不是一个已存在的窗口或者框架,那么就会根据第三个参数位置上传入的字符串来创建一个新的窗口或者标签页。
第三个参数是一个以逗号分隔的字符串,例如“height=400,width=300”,用来确定新窗口的大小。
可以出现在该字符串位置的选项如下:
设置 | 值 | 说明 |
fullscreen | yes或no | 表示浏览器窗口是否最大化,仅限于IE |
height | number数值 | 表示新窗口的高度,>=100 |
width | number数值 | 表示新窗口的宽度,>=100 |
left | number数值 | 表示窗口的左坐标,>=0 |
location | yes或no | 表示是否在浏览器窗口显示地址栏 |
resizable | yes或no | 表示是否允许拖动边缘来更改窗口的大小 |
在下面的代码中会新建一个名为newWindow窗口,窗口的初始大小为400*400,可以调整大小
window.open("http://www.baidu.com","newWindow","height=400,width=400,top=10,left=10,resizable=yes");
window.open()方法会返回一个指向新窗口的引用,引用的对象和其他window对象大致相似,但是可以对其进行更多的控制。
弹出窗口屏蔽程:大多数程序都有弹出窗口屏蔽程序,而没有内置此类程序的浏览器,也可以安装Yahoo,Toolbar等带有内置屏蔽程序的实用工具。因此弹出窗口被屏蔽是就有两种情况,一如果是被浏览器内置窗口屏蔽的,那么window.open()函数很可能返回null,只要检测这个返回的值是否null就可以判断窗口是否被屏蔽。
如果是被浏览器扩展或者其他程序阻止的弹出窗口,那么window.open()通常会抛出一个异常。因此要想准确判断出弹出窗口是否被屏蔽,必须在检测返回值的同时将其封装在try,,,catch中
blocked=false;
try
{
var win=window.open("http://www.baidu.com","newWindow","height=400,width=400,top=10,left=10,resizable=yes");
if (win==null) {
blocked=true;
}
}catch(ex)
{
blocked=true;
}
if (blocked) {
alert("the popup was blocked");
}
4、间歇调用和超时调用
javascript是单线程 语言,可以通过设置超时值和间歇时间值来调度代码在特定的时间时刻调用。前者是指在指定的时间过后执行代码,后者是每个指定的时间就调用一次代码
超时调用需要调用window的setTimeout方法,它接收两个参数:要执行的代码和毫秒表示的时间。其中第一个参数可以使包含javascript代码的字符串(和eval的参数相同),也可以是一个函数。
setTimeout(function(){
alert("hello,world!");
},5000);
第二个参数表示再经过多长时间将该任务加入到执行队列中,如果队列为空则立即执行,否则等队列中的任务执行完在执行。
调用setTimeout方法后会返回一个数值ID,将该数值作为参数赋给clearTimeout(ID),就可以在时间未过之前将超时调用完全取消。
间歇调用和超时调用类似,不过该方法会在指定的时间重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法为setInterval()和setTimeout方法的参数相同,取消间歇调用clearInterval()方法,和cleatTimeout()参数完全相同。
5、系统对话框
浏览器通过调用alert(),confirm(),prompt()方法看,可以调用系统对话框向用户显示消息。系统对话框和浏览器显示的网页没有关系。
javascript之BOM对象(一window对象)的更多相关文章
- JavaScript(4)——闭包与this对象以及window对象
闭包与this对象以及window对象 这次写的是这三个内容.其实在写之前,会觉得这三个内容很多,但是写了之后会发现,内容确实很多,但是可以写出来的也并不是很多.可能是我总结能力太差.但是这些内容我觉 ...
- JavaScript中的global对象,window对象以及document对象的区别和联系
JavaScript中的global对象,window对象以及document对象的区别和联系 一.概念区分:JavaScript中的global对象,window对象以及document对象 1.g ...
- DOM对象和window对象
本文内容: DOM对象 Window 对象 首发日期:2018-05-11 DOM对象: DOM对象主要指代网页内的标签[包括整个网页] 比如:document代表整个 HTML 文档,用来访问页面中 ...
- JavaScript浏览器对象模型(BOM)之window对象
一.BOM概述 BOM(Browser Object Model)浏览器对象模型,它提供了很多对象,用于访问浏览器的功能. BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象 ...
- JavaScript (JS)基础:BOM 浅析 (含window对象相关基本方法、属性解析)
① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...
- 《Javascript权威指南》学习笔记之十五:BOM之源---window对象
BOM是Browser Object Model的缩写,即浏览器对象模型,提供了独立于网页内容和浏览器窗体之间进行交互的APi.API由若干对象组成,因为浏览器是Javascript的宿主,因此,这些 ...
- 第8章 浏览器对象模型BOM 8.1 window对象
ECMAScript是javascript的核心,但如果要在web中使用javascript,那么BOM(浏览器对象模型)则无疑是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,在浏览器之间共 ...
- javascript知识点之DOM与window对象
在学习javascript过程中只是一知半解好多,碰到自己不知道属性方法,到最后都不知道自己学到了什么 js代码为什么这样写 为什么你知道这方法或属性可以这样用. DOM和window对象 DOM基本 ...
- BOM元素之window对象
在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.这意味着在网页中定义的任何一个对象.变量和函数,都以wi ...
- JavaScript 学习(1)--window对象
JavaScript 学习--Window对象 window对象方法 1.1 创建新窗体 //窗体打开 var newWindow=Window.open("default.html&quo ...
随机推荐
- vmware centos 桥接模式 联网记录
参考这篇文章 https://www.cnblogs.com/jasmine-Jobs/p/5928218.html 记得要修改/etc/sysconfig/network文件的网关配置,因为ip变动 ...
- vue-quill-editor富文本编辑器,添加了汉化样式却汉化不了
背景 今天在做后台管理系统时,尝试整合 vue-quill-editor 富文本编辑器,整合完成后,想进行汉化,查阅资料发现,只需自己定义样式替换即可. 原因 当进行汉化时,发现样式并没有替换,汉化失 ...
- B1020 月饼(25分)
#include<cstdio> #include<algorithm> #include<iostream> using namespace std; struc ...
- Codeforces Round #576 (Div. 1)
Preface 闲来无事打打CF,就近找了场Div1打打 这场感觉偏简单,比赛时艹穿的人都不少,也没有3000+的题 两三个小时就搞完了吧(F用随机水过去了) A. MP3 题意不好理解,没用翻译看了 ...
- 3.Python配套习题
这里会持续更新Python每个部分知识点的配套练习题的目录...
- Apollo:微服务架构下的配置管理
问题背景 在实际工作中,我们的开发环境,测试环境,生产环境对应的 Mysql 数据库,Redis 这些信息都不一样,每个环境都有对应的一套配置,在 Spring Boot 中我们通常会编写多个配置文件 ...
- linux-根目录添加内存
01,添加磁盘到服务器 02, 查看添加的内容 这个是新添加的 03, 创建新分区 [root@oracle01 ~]# fdisk /dev/sdb --格式化分析 Welcome ). Chang ...
- ROS融合IMU笔记
ROS官网有一个叫robot_pose_ekf的包,是专门处理传感器融合的包,具体介绍:http://wiki.ros.org/robot_pose_ekf 其中主要功能是订阅主题包括odom(里程计 ...
- java中的对象、类、包、模块、组件、容器、框架、架构的概念入门
在Java中有那么一些概念:对象.类.包.模块.组件.容器.框架.这些概念都有一个共同的特点,就是[容纳]. 对象(Object) 在Java的世界里,对象是通过属性和方法来分别对应事务所具有的静态属 ...
- 乘法器——booth编码
博主最近在学习加法器.乘法器.IEEE的浮点数标准,作为数字IC的基础.当看到booth编码的乘法器时,对booth编码不是很理解,然后在网上找各种理解,终于豁然开朗.现将一个很好的解释分享给大家,希 ...