window两个窗口上下摆放_window对象方法(open和close)

window对象

  • 语法:

  • window.open(pageURL,name,parameters)

  • 功能:

  • 打开一个新的浏览器窗口或查找一个已命名的窗口

  • 参数说明:

  • pageURL:子窗口路径
    name:子窗口句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
    parameters:窗口参数(各参数用逗号隔开)
            width:窗口宽度
            height:窗口高度
            left:窗口X轴坐标
            top:窗口Y轴坐标
            toolbar:是否显示浏览器的工具栏
            menubar:是否显示浏览器的菜单栏
            scrollbars:是否显示滚动条
            location:是否显示地址字段
            status:是否添加状态栏

  • 语法:

  • window.close()

  • 功能:

  • 关闭浏览器窗口


选择练习 1

关于window对象的open方法,下列说法正确的是?(选择两项)

A open方法用于打开一个新的浏览器窗口或查找一个已命名的窗口B open方法打开的窗口宽和高都是固定的,无法进行改变C 通过open方法中参数的设置可以重新设定窗口的特征,可以对打开的新窗口的宽和高等进行改变D 如果open中的url参数为空的话,那么没有窗口被打开

正确答案:A,C
参考解析:
该题考察的是window对象的open方法,正确选项为AC;
1、open方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
2、通过open方法中参数的设置可以重新设定窗口的特征,可以对打开的新窗口的宽和高等进行改变
3、如果open方法中的url参数为空的话,那么新窗口也会被打开只是不会显示任何文档


选择练习 2

通过window对象的open方法打开了一个子窗口,想让子窗口的滚动条不被显示,通过设置哪个属性可以实现?(选择一项)

A menubar : noB scrollbars=noC menubar=noD scrollbars : no

正确答案:B
参考解析:
该题考察的是window对象open方法的窗口特征设置,正确选项为B;
通过open方法中的scrollbars属性,可以规定子窗口是否要显示滚动条,默认值是yes,如果不现实,值是no,属性和属性值之间用等号连接。


编程练习

实现:当点击页面上的按钮时,弹出确认框
(1) 当点击按钮上的确定时,打开设置了新特征的子窗口, 新窗口的特征参考任务栏中的描述
(2) 当点击按钮上的取消时,关闭当前页面
(本题因为涉及到两个窗口,请在本地浏览器运行并查看效果!)

任务

第一步:获取到按钮元素,并为按钮绑定鼠标单击事件
下面的步骤皆在单击事件中进行
第二步:当点击按钮时,弹出确认框,用if判断对确认框返回的值进行判断
(1) 返回的值为true时,说明点击的是确认,打开新的窗口“newPage.html”,用open()方法,新窗口的特征如下:
①宽300,高300
②窗口距离屏幕上边200,距离屏幕左边600
③窗口不显示地址字段、菜单栏、滚动条以及状态栏
(2)返回值是false为false时,表示点击的是“取消”按钮,当前页面被关闭,用close()方法。

参考代码
<html><head><meta charset="UTF-8"><title>打开/关闭页面title>head><body><input   type="button" name="" value="打开页面" /><script type="text/javascript">  window.onload=function(){    var btn=document.getElementsByTagName("input")[0];    btn.onclick=function(){      var result=window.confirm("是否打开页面");      if(result==true){        window.open("newPage.html","newPage","width=300,height=300,left=600,top=200,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");      }      if(result==false){        window.close();      }    }  }script>body>html>

cd076c7c4fdad73f1dab411e4968e2bb.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值