博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS--JavaScript操作BOM(浏览器对象模型、window对象概述、window.open()方法打开窗口)
阅读量:2441 次
发布时间:2019-05-10

本文共 3681 字,大约阅读时间需要 12 分钟。

window对象

window对象是BOM的核心,代表浏览器窗口的一个实例。在浏览器中,window对象既是JavaScript访问浏览器窗口的接口,又是JavaScript的全局对象(Global)。因此在全局作用域中声明的所有变量和函数也是window对象的属性和方法。

访问浏览器窗口

通过window对象可以访问浏览器窗口,同时与浏览器相关的其他客户端对象都是window的子对象,通过window属性进行引用。客户端各个对象之间存在一种结构关系,这种关系构成浏览器对象模型,window对象代表根节点,如下图:

在这里插入图片描述

  • window:

    客户端JavaScript中的顶层对象。每当< body > 或 < frameset >标签出现时,window对象就会被自动创建

  • navigator:

    包含客户端有关浏览器的信息

  • screen:

    包含客户端显示屏的信息

  • history:

    包含浏览器窗口访问过的URL信息

  • location:

    包含当前网页文档的URL信息

  • document:

    包含整个HTML文档,可被用来访问文档内容,及其所有页面元素。

全局作用域

客户端JavaScript代码都在全局上下文环境中运行,window对象提供了全局作用域。由于window对象是全局作用域,因此所有的全局变量都被视为该对象的属性。

示例:在脚本中定义一个变量或函数时,可以通过window对象访问它们

var a = "window.a";	//全局变量function f(){
//全局变量 alert(a);}alert(window.a);//引用window对象的属性a,返回字符串“window.a”window.f() //调用window对象的方法f(),返回字符串“window.a”

定义全局变量与在window对象上直接定义属性还有一点不同:全局变量不能通过delete运算符删除,而直接在window对象上定义的属性可以被删除。

示例:

va a = "a";window.b = "window.b";c = "c";alert(delete window.a)://返回false,删除失败alert(delete window.b)://返回ture,删除成功alert(delete window.c)://返回true,删除成功alert(window.a)://返回“a”alert(window.b)://返回undefinedalert(window.c)://返回undefined

使用var语句声明全局变量,window会为这个属性定义一个名为“configurable”的特性,这个特性的值被设置为false,这样该属性就不可以通过delete运算符删除。

示例:

//直接访问未声明的变量,JavaScript会抛出异常,但是通过window对象进行访问,可以判断未声明的变量是否存在alert(window.a);	//返回undefinedalert(a);	//抛出异常

打开和关闭窗口

使用window对象的open()方法,可以打开一个新窗口,返回值为新创建的window对象,使用这个window对象可以引用新创建的窗口。用法如下:

window.open(URL, name, features, replace)
  • URL:
    可选字符串,声明在新窗口中显示文档的URL。如果省略,或者为空,则新窗口就不会显示任何文档。
  • name:
    可选字符串,声明新窗口的名称。这个名称可以用作标记< a > 和 < form >的属性target的值。如果该参数指定了一个已经存在的窗口,那么open()方法就不再创建一个新窗口,而只是返回对指定窗口的引用,在这种情况下,features参数将被忽略。
  • features:
    可选字符串,声明了新窗口要显示的标准浏览器的特征,具体说明如下表所示,如果省略该参数,新窗口将具有所有标准特征。
  • replace:
    可选的布尔值,规定了装载到窗口的URL是在窗口的浏览器历史中创建一个新条目,还是替换浏览器历史中的当前条目。

新窗口的特征表:

特征 说明
channelmode=yes丨no丨1丨0 是否使用剧院模式显示窗口。默认为no
directories=yes丨no丨1丨0 是否添加目录按钮。默认为yes
fullscreen=yes丨no丨1丨0 是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口必须同时处于剧院模式
height=piedls 窗口文档显示区的高度。以像素计
left=pixels 窗口的x坐标。以像素计
location=yes丨no丨1丨0 是否显示地址字段。默认是yes
menubar=yes丨no丨1丨0 是否显示菜单栏
resizable=yes丨no丨1丨0 窗口是否可调节尺寸。默认是yes
scrollbars=yes丨no丨1丨0 是否显示滚动条。默认是yes
status=yes丨no丨1丨0 是否添加状态栏。默认是yes
titlebar=yes丨no丨1丨0 是否显示标题栏。默认是yes
toolbar=yes丨no丨1丨0 是否显示浏览器的工具栏。默认是yes
top=pixels 窗口的y坐标
width=pixels 窗口的文档显示区的宽度。以像素计

新创建的window对象拥有一个opener属性,它保存着打开它的原始窗口对象。opener只在弹出窗口的最外层window对象(top)中定义,而且指向调用window.open()方法的窗口或框架。

示例:演示打开窗口与原窗口之间的关系

myWindow = window.open();	//打开新的空白窗口myWindow.document.write("

这是新打开的窗口

");//在新窗口中输出提示信息myWindow.focus(); //让新窗口获取焦点myWindow.opener.document.write("

这是原来的窗口

");//在原窗口中输出提示信息alert(myWindow.opener == window()); //检测window.opener属性值

虽然弹出窗口中有一个指针(opener)指向打开它的原始窗口,但原始窗口中并没有这样的指针指向弹出窗口。窗口并不跟踪已打开的弹出窗口,因此必要时只能手动实现跟踪。

有些浏览器(如Chrome)会在独立的进程中运行每个标签页。当一个标签页打开另一个标签页时,如果两个window对象之间需要通信,那么新标签页就不能运行在独立的进程中。在Chrome中将新创建的标签页的opener属性设置为null,即表示在单独的进程中运行新标签页。

myWindow = window.open();myWindow.opener == null();

使用window对象的close()方法可以关闭一个窗口:

w.close();//关闭一个新创建的w窗口

如果在打开窗口内部关闭自身窗口,则应该使用以下方法。

window.close();

使用window.closed属性可以检测当前窗口是否关闭,如果关闭返回true,否则返回false。

示例:自动弹出一个窗口,然后在5秒之后自动关闭该窗口,同时允许用户单击页面超链接,更换团出窗口内显示的网页URL

var url = "http://news.baidu.com/";var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no, scrollbars=n0, resizable=no, location=no, status=no";document.write('切换到百度首页');var me = window.open(url, "newW", features);setTimeout(function(){
if(me.closed){
alert("创建的窗口已经关闭。"); }else{
me.close(); }}, 5000);

示例:很多浏览器会禁止JavaScript弹出窗口,如果在浏览器禁止的情况下,使用open()打开新窗口,将会抛出一个异常,说明打开窗口失败。为了避免此类问题,同时为了了解浏览器是否支持禁用弹窗行为,可以使用下面的代码进行探测:

var error = false;try{
var w = window.open("https;//www.baidu.com/", "_blank"); if(w == null){
error = true; }}catch(ex){
error = true;}if(error){
alert("浏览器禁止弹出窗口!");}

转载地址:http://eisqb.baihongyu.com/

你可能感兴趣的文章
stl multimap_C ++ STL多图容器– std :: multimap
查看>>
python选择排序_Python选择排序
查看>>
队列stl queue<>_C ++ STL队列容器适配器– std :: queue
查看>>
队列stl queue<>_C ++ STL优先级队列– std :: priority_queue
查看>>
SQL Server调整以实现更快的查询
查看>>
pl/sql打印_PL / SQL程序打印图案
查看>>
c++stl和std_C ++ STL多集容器– std :: multiset
查看>>
pl/sql查找表_PL / SQL程序查找三个数中的最大值
查看>>
Mac的Movavi屏幕捕获–录制视频的简单解决方案
查看>>
stl 容器适配器_C ++ STL堆栈容器适配器– std :: stack
查看>>
如何开始虚拟现实(VR)开发?
查看>>
Fresco Android教程
查看>>
c++中将字符串转化为数字_在C和C ++中将十进制数转换为罗马数字
查看>>
unity 粒子系统反弹_零反弹-最佳电子邮件验证系统
查看>>
rail_deviceid_C和C ++中的Rail Fence密码程序[加密和解密]
查看>>
数字转日期 pl/sql_交换两个数字的PL / SQL程序
查看>>
stl set容器_C ++ STL设置容器– std :: set
查看>>
HTML和HTML5之间的区别
查看>>
阿姆斯壮数_阿姆斯壮编号的PL / SQL程序
查看>>
如何使用Android Studio将网站转换为Android App
查看>>