码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-09-17 21:28:22      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

【功能说明】
  利用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 = "点击任何区域,子窗口弹出";
    }
} 

 

【效果展示】

 

【源码查看】

 

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

标签:

原文地址:http://www.cnblogs.com/xiaohuochai/p/4817389.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!