• 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>
    

     

      

     
     
     
     
     
  • 相关阅读:
    Java 之SpringBoot+Vue实现后台管理系统的开发
    保证接口数据安全的10种方式
    连八股文都不懂还指望在前端混下去么
    2020年2月面试题100+大全(合适各级Java人员)
    Java8 Stream源码精讲(一):从一个简单的例子入手
    Java8新特性Lambda表达式
    Java高级面试题及答案
    切片 零值 浅拷贝 泄露 扩容
    @ConfigurationProperties使用及与@Value对比
    JSON中的JSON.parseArray()方法
  • 原文地址:https://www.cnblogs.com/xiaoheimiaoer/p/3735076.html
Copyright © 2020-2023  润新知