父窗口控制子窗口弹出和关闭【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 = "点击任何区域，子窗口弹出";
    }
} 

【效果展示】

【源码查看】