父窗口统制子窗口弹出和关闭【JSdemo】

父窗口控制子窗口弹出和关闭【JSdemo】

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

 

【HTML代码说明】

<div class="box" 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 = "点击任何区域,子窗口弹出";
    }
} 

 

【效果展示】

 

【源码查看】