你的位置:首页 > Java教程

[Java教程]父窗口控制子窗口弹出和关闭【JSdemo】


【功能说明】
  利用window.open()方法实现点击父窗口任意区域控制子窗口打开的关闭的效果

 

【HTML代码说明】

<div id="box">点击任何区域,子窗口打开</div>

 

【CSS代码说明】

/*设置box高度和页面高度一致*/ body{   margin: 0; } html,body{  height: 100%; } .box{
   border: 1px solid black; height: 99%; font-size: 50px; line-height: 60px; margin: 0 auto; }

 

【JS代码说明】

var oBox = document.getElementById('box');document.onclick = function(){  if(!window.obj1){    obj1 = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");    oBox.innerHTML = "点击任何区域,子窗口关闭";  }else{    //新创建的window对象有一个opener属性,其中保存着打开它的原始窗口对象。    console.log(obj1.opener == window)    //关闭新打开的窗口    obj1.close();     //删除obj1属性      delete window.obj1;    oBox.innerHTML = "点击任何区域,子窗口弹出";  }} 

 

【效果展示】

 

【源码查看】