JS Bom(window)对象
window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一个 window 对象。
全局作用域
在客户端浏览器中,window 对象是访问 BOM 的接口,如引用 document 对象的 document 属性,引用自身的 window 和 self 属性等。同时 window 也为客户端 JavaScript 提供全局作用域。
示例
由于 window 是全局对象,因此所有的全局变量都被解析为该对象的属性。
1 var a = "window.a"; //全局变量
2 function f () { //全局函数
3 console.log(a);
4 }
5 console.log(window.a); //返回字符串“window.a”
6 window.f(); //返回字符串“window.a”
JavaScript中的任何一个全局函数或变量都是window的属性。
1 <script type="text/javascript">
2 var name="撼地神牛";
3 document.write(window.name);
4 </script>
window的子对象
使用 window 对象可以访问客户端其他对象,这种关系构成浏览器对象模型,window 对象代表根节点,浏览器对象关系的关系如图所示,每个对象说明如下
window的主对象主要有如下几个:
window:客户端 JavaScript 顶层对象。每当 <body> 或 <frameset> 标签出现时,window 对象就会被自动创建。
navigator:包含客户端有关浏览器信息。
screen:包含客户端屏幕的信息。
history:包含浏览器窗口访问过的 URL 信息。
location:包含当前网页文档的 URL 信息。
document:包含整个 HTML 文档,可被用来访问文档内容及其所有页面元素
使用系统对话框
window 对象定义了 3 个人机交互的方法,主要方便对 JavaScript 代码进行调试。
- JavaScript alert() 函数:弹出消息对话框(对话框中有一个OK按钮)
- JavaScript confirm() 函数:弹出消息对话框(对话框中包含一个OK按钮与Cancel按钮)
- JavaScript prompt() 函数:弹出消息对话框(对话框中包含一个OK按钮、Cancel按钮与一个文本输入框)
打开和关闭窗口
- JavaScript open() 函数:打开(弹出)一个新的窗体
- JavaScript close() 函数:关闭窗体
- JavaScript opener 属性:通过opener可以实现跨窗体之间的通讯,但是要保证是在同一域名下,而且一个窗体要包含另一个窗体的opener。
1. window.open (URL, name, features, replace)
参数列表如下:
- URL:可选字符串,声明在新窗口中显示网页文档的 URL。如果省略,或者为空,则新窗口就不会显示任何文档。
- name:可选字符串,声明新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的 target 目标值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用,在这种情况下,features 参数将被忽略。
- features:可选字符串,声明了新窗口要显示的标准浏览器的特征,具体说明如下表所示。如果省略该参数,新窗口将具有所有标准特征。
- replace:可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。
2. window.open函数新建立窗体后会返回新建窗体的window对象,通过此对象可以控制窗体(移动,改变大小,关闭)。
<input type="button" value="关闭已经打开的窗体!" onclick="window.close();" />
self.close();配合上setTimeout()可以实现,打开的窗口定时关闭的效果。
使用定时器
window 对象包含 4 个定时器专用方法,说明如下表所示,使用它们可以实现代码定时执行,或者延迟执行,使用定时器可以设计演示动画。
方法 | 说明 |
setInterval() | 按照执行的周期(单位为毫秒)调用函数或计算表达式 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
clearInterval() | 取消由 setInterval() 方法生成的定时器 |
clearTimeout() | 取消由 setTimeout() 方法生成的定时器 |
窗体滚动轴控制
- JavaScript scrollTo() 函数:在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置。
- JavaScript scrollBy() 函数:如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)。
1 <div style="height:150%; width:150%; background-color:#ddd">
2 <input type="button" id="btn1" value="移动滚动条!" onclick="window.scrollTo(100,100);" /> //相当于设置绝对位置
3 <input type="button" id="btn1" value="移动滚动条!" onclick="window.scrollBy(100,100);" /> //相当于累加
4 </div>
窗体焦点控制
- JavaScript focus() 函数:使窗体或空间获得焦点
- JavaScript blur() 函数:使窗体或控件失去焦点
<div>
<input type="button" value="获得焦点" onclick="document.getElementById('testInput').focus()" />
<input type="button" value="失去焦点" onclick="document.getElementById('testInput').blur()" />
<input type="text" value="text" id="testInput" onblur="alert('我已失去焦点')" />
</div>
JS Bom(window)对象的更多相关文章
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- js的window对象
js的window对象 1.子窗口方法 function testOpen(){ window.open('son.html','newwindow','height=400, width=600, ...
- js中window对象详解以及页面跳转
1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...
- JS BOM(浏览器对象)
BOM即浏览器对象模型,它包括如下一些对象! (一)screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息. 常见的属性有: availHeight:返回显示屏幕的高度 availWid ...
- BOM window对象方法
window对象方法 alert():弹出一个警告对话框. prompt():弹出一个输入对话框. confirm():弹出一个确认对话框.如果单击“确定按钮”返回true,如果单击“取消 ...
- js中Window 对象及其的方法
window.location 对象 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面.window.location 对象在编写时可不使用 wind ...
- JS day01——window对象、执行顺序、线程模型
1.window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. window ...
- js中window对象的opener属性的一个坑
2018-05-08 17:48:33 今天我编写代码碰到了一个让我纠结了很久的坑,特别想在此说一下,让其他人避免我踏过的这个坑. 这个坑就是:在我自己写的子窗口中用opener属性却获取不到父窗口的 ...
- JS之window对象
window对象 window属性: opener:打开当前窗口的源窗口,如果这个窗口是由别的网页点击链接跳转过来的,或者是从另外一个页面点击打开窗口打开的,opener就是找到源页面的.如果当前窗口 ...
- 转-JS之Window对象
一.说明:他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用“Window.XXX”这种形式,而是直接使用“XXX”.一个框架页面也是一个窗口. 二.Window窗口 ...
随机推荐
- Vue的Component name报错
问题描述: Component name "xxxxx" should always be multi-word.eslintvue 解决方案: 在项目目录中找到 .eslintr ...
- 持续集成环境(5)-Maven安装和配置
在Jenkins集成服务器上,我们需要安装Maven来编译和打包项目. 安装Maven 1.下载Maven软件到jenkins服务器上 wget https://mirrors.aliyun.com/ ...
- 使用Eclipse快速开发jsp和.编码问题、JSP页面元素以及request对象
在IDEA中创建的Web项目: 浏览器可以直接访问WebContent中的文件. 例如http:// localhost:8888/MyJspProject/index1.jsp其中的index1.j ...
- ZooKeeper启动报错,未成功开启服务
1.问题示例 (1)启动ZooKeeper服务报错 [Hadoop@master ~]$ zkServer.sh statusZooKeeper JMX enabled by defaultUsing ...
- curl解决乱码
mb_convert_encoding($str, 'UTF-8', 'UTF-8,GBK,GB2312,BIG5');
- 9. PEP8规范
1. 每一级缩进4个空格 2. 续行时缩进要比正常行多缩进, 要能明显看出是续行的 3. 每一行最多79个字符 4. 函数和类定义时在前后加2个空行, 类内接口在定义时, 前后加1个空行 5. 二元运 ...
- Spring--注解开发+依赖注入
自动装配 数据层: 业务层: 自动装配: 结果: 若是将自动装配的注解放在set函数处: 结果: 结果相同,若是将set方法去掉的话: 结果: 这样的话,set方法也得到解放了耶! 以上都是按照类型装 ...
- Available parameters are [arg0, collection, list]错误的解决
关于这个错误 每次只要是俩list集合一嵌套起来,就会报出这个错误,检查过,并不是关键字的误用: 这个才是根本原因: 当mybatis传入参数为list集合的时候:mybatis会自动把其封装为一个m ...
- 11.3 shtctl的指定省略(harib08c)
ps:能力有限,若有错误及纰漏欢迎指正.交流 11.3 shtctl的指定省略(harib08c) 对bootpack.h做了如下改动 struct SHEET { unsigned char *bu ...
- 用声网 Android UIKit 为实时视频通话应用添加自定义背景丨声网 SDK 教程
使用声网 SDK 和 UIKit 创建视频推流应用非常简单,而且声网还有许多功能,可以提高视频通话的质量和便利性.例如,我们可以在视频通话过程中使用虚拟背景,为视频通话增添趣味性. 我们可以通过以下三 ...