热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript之BOM对象(一window对象)

javascript包含三个部分,ECMAScript,BOM和DOM。ECMAScript是javascript的核心,包含javascript的基础语法。在Web中使用javascript,BOM

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);
//29
sayAge();//29
window.sayAge();//29

由于是全局作用域,所以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 Exampletitle>
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 Exampletitle>
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,);

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","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()方法看,可以调用系统对话框向用户显示消息。系统对话框和浏览器显示的网页没有关系。image


推荐阅读
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 闭包一直是Java社区中争论不断的话题,很多语言都支持闭包这个语言特性,闭包定义了一个依赖于外部环境的自由变量的函数,这个函数能够访问外部环境的变量。本文以JavaScript的一个闭包为例,介绍了闭包的定义和特性。 ... [详细]
  • Java学习笔记之面向对象编程(OOP)
    本文介绍了Java学习笔记中的面向对象编程(OOP)内容,包括OOP的三大特性(封装、继承、多态)和五大原则(单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则)。通过学习OOP,可以提高代码复用性、拓展性和安全性。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • 深入理解Kafka服务端请求队列中请求的处理
    本文深入分析了Kafka服务端请求队列中请求的处理过程,详细介绍了请求的封装和放入请求队列的过程,以及处理请求的线程池的创建和容量设置。通过场景分析、图示说明和源码分析,帮助读者更好地理解Kafka服务端的工作原理。 ... [详细]
  • 预备知识可参考我整理的博客Windows编程之线程:https:www.cnblogs.comZhuSenlinp16662075.htmlWindows编程之线程同步:https ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 本文介绍了Oracle存储过程的基本语法和写法示例,同时还介绍了已命名的系统异常的产生原因。 ... [详细]
  • JVM 学习总结(三)——对象存活判定算法的两种实现
    本文介绍了垃圾收集器在回收堆内存前确定对象存活的两种算法:引用计数算法和可达性分析算法。引用计数算法通过计数器判定对象是否存活,虽然简单高效,但无法解决循环引用的问题;可达性分析算法通过判断对象是否可达来确定存活对象,是主流的Java虚拟机内存管理算法。 ... [详细]
  • 本文介绍了解决二叉树层序创建问题的方法。通过使用队列结构体和二叉树结构体,实现了入队和出队操作,并提供了判断队列是否为空的函数。详细介绍了解决该问题的步骤和流程。 ... [详细]
  • 计算机存储系统的层次结构及其优势
    本文介绍了计算机存储系统的层次结构,包括高速缓存、主存储器和辅助存储器三个层次。通过分层存储数据可以提高程序的执行效率。计算机存储系统的层次结构将各种不同存储容量、存取速度和价格的存储器有机组合成整体,形成可寻址存储空间比主存储器空间大得多的存储整体。由于辅助存储器容量大、价格低,使得整体存储系统的平均价格降低。同时,高速缓存的存取速度可以和CPU的工作速度相匹配,进一步提高程序执行效率。 ... [详细]
author-avatar
qinyu1982_469
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有