• window.open和window.close的使用详解


    有时候,我们想通过JS实现一个<a>的新开标签的效果,此时我们想到了window.open方法实现。那么window.open到底应该怎么使用呢?
     
    我们知道window.open可以新开窗口或标签页(这通常和浏览器的设置选项有关),载入指定的URL到新的或已存在的窗口中,并返回代表那个窗口的window对象。window.close可以关闭窗口,但是只能自动关闭JS打开的窗口,如果要关闭其他窗口,必须提示用户进行确定或取消操作(这个与浏览器相关,经测IE需要提示才能关闭;其他浏览器不允许自动关闭)。
     
    我们可以直接使用window.open()打开窗口,使用window.close()关闭窗口
     
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>window.open和window.close的使用详解</title>
    </head>
    <body>
    <button id="openWindow">打开窗口</button>
    <button id="closeWindow">关闭窗口</button>
    <script>
    (function(){
     var $ = function(id) {return document.getElementById(id);}
     var win = null;
     //打开窗口
     $('openWindow').onclick = function() {
      win = window.open();
     }
     //关闭窗口
     $('closeWindow').onclick = function() {
      win && win.close();
     }
     //自动关闭窗口
     window.close();
    })();
    </script>
    </body>
    </html>
    

      

     
    window.open(URL, name[, property][,  boolean])需要四个参数:
    第一个参数URL:新窗口中显示的文档的URL,如果省略了或者为空时,会使用'about:blank'
    第二个参数name:新窗口的名字,可以配合target使用,如果省略了,会使用‘_blank’(这里需要简单介绍一下:_parent和_top,_parent指的是直接父级窗口,_top指的是顶级祖先窗口)
    第三个参数protery:以逗号分割的可选参数,包含窗口大小和各种属性。如果省略了,那么会用默认的大小和标准的UI组件(显式的调用更像是打开窗口,而不是标签)。这个参数是非标准的,HTML5规范也主张浏览器忽略它。
    第四个参数boolean:只有在第二个参数命名的是存在的窗口,才有效。声明了由第一个参数指定的URL,替换窗口浏览历史的当前条目。
     
    window.opener指的是原始窗口,如果没有的话,为null。
     
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>window.open和window.close的使用详解</title>
    </head>
    <body>
    <button id="openWindow">打开窗口</button>
    <button id="closeWindow">关闭窗口</button>
    <script>
    (function(){
     var $ = function(id) {return document.getElementById(id);}
     var win = null;
     //打开窗口
     $('openWindow').onclick = function() {
      win = window.open('about:blank', '_blank', 'width=200,height=200');
      //win.opener指的是新窗口原始窗口
      //alert(win.opener === window);
     }
     //关闭窗口
     $('closeWindow').onclick = function() {
      win && win.close();
      //主动关闭窗口后win.opener为false
      //alert(win.opener === window);
     }
     //alert(window.opener === window);
     //自动关闭窗口
     //window.close();
    })();
    </script>
    </body>
    </html>
    

     

      

     
     
     
     
     
  • 相关阅读:
    system函数调用
    ubuntu设置开机默认进入界面及命令行下开启图像界面
    博客园添加目录
    [转]JavaScript自动生成博文目录导航
    博客选择: csdn博客和博客园(cnblog)
    [转]Git服务器的搭建全部功略
    Ubuntu忘记密码
    [转]android logo:内核、android开机动画
    [转]关于前置声明与C++中头文件相互包含的几点问题
    [转]while(cin>>str)输入结束符,并正确执行后续程序
  • 原文地址:https://www.cnblogs.com/xiaoheimiaoer/p/3735076.html
Copyright © 2020-2023  润新知