热门标签 | 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


推荐阅读
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例,详细解释了从安装扩展到编写具体代码的全过程。 ... [详细]
  • 本文探讨了使用Python实现监控信息收集的方法,涵盖从基础的日志记录到复杂的系统运维解决方案,旨在帮助开发者和运维人员提升工作效率。 ... [详细]
  • 本文探讨了如何在 Google Sheets 中通过自定义函数实现 AJAX 调用。具体介绍了编写脚本的方法,以便在电子表格中发起 AJAX 请求,从而实现数据的动态获取与更新。这种方法不仅简化了数据处理流程,还提高了工作效率。 ... [详细]
  • 软件开发史上最具影响力的十位编程大师(附图解)
    在软件开发领域,有十位编程大师对行业发展产生了深远影响。本文基于国外知名社区的一项评选,通过图文并茂的形式,详细介绍了这十位杰出人物,包括游戏开发先驱John Carmack等,为读者呈现了他们卓越的技术贡献与创新精神。 ... [详细]
  • 本文旨在构建一个JavaScript函数,用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式,并检查密码强度,以提升用户账户的安全性。通过集成正则表达式和条件判断语句,该方法能够有效防止常见的输入错误,同时提供即时反馈,改善用户体验。 ... [详细]
  • 在AngularJS中,有时需要在表单内包含某些控件,但又不希望这些控件导致表单变为脏状态。例如,当用户对表单进行修改后,表单的$dirty属性将变为true,触发保存对话框。然而,对于一些导航或辅助功能控件,我们可能并不希望它们触发这种行为。 ... [详细]
  • 本文详细介绍了如何在PHP中使用Memcached进行数据缓存,包括服务器连接、数据操作、高级功能等。 ... [详细]
  • 本文探讨了在AspNetForums平台中实施基于角色的权限控制系统的方法,旨在为不同级别的用户提供合适的访问权限,确保系统的安全性和可用性。 ... [详细]
  • 本文探讨了互联网服务提供商(ISP)如何可能篡改或插入用户请求的数据流,并提供了有效的技术手段来防止此类劫持行为,确保网络环境的安全与纯净。 ... [详细]
  • WebBenchmark:强大的Web API性能测试工具
    本文介绍了一款名为WebBenchmark的Web API性能测试工具,该工具不仅支持HTTP和HTTPS服务的测试,还提供了丰富的功能来帮助开发者进行高效的性能评估。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 深入解析 JavaScript 代码执行流程:理解执行上下文与变量提升机制
    本文深入探讨了JavaScript代码的执行流程,重点解析了执行上下文和变量提升机制。通过详细分析代码解析过程,帮助开发者更好地理解JavaScript中的作用域和执行环境,为编写高效、无误的代码提供理论支持。 ... [详细]
  • 在《JavaScript进阶之旅:第三阶段深入探索》中,我们将通过一系列复杂的代码示例,深入探讨JavaScript的高级特性与应用技巧。本阶段将重点讲解如何利用用户输入进行动态交互,例如通过提示框获取1到9之间的正整数,并基于此实现更多功能。此外,还将介绍如何优化代码结构,提升程序的可读性和维护性。 ... [详细]
  • 本文详细介绍了如何使用Rufus工具制作一个兼容UEFI启动模式的Windows Server 2008 R2安装U盘,包括必要的软件和步骤。 ... [详细]
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社区 版权所有