zoukankan      html  css  js  c++  java
  • window.open()参数详解及对浏览器的兼容性

           因为篇幅,window.open()浏览器的兼容性请点击 这里

    Part1:参数详解

      window.open(url,name,param)
    

      url:即将打开的子窗口的地址;比如 "http://www.baidu.com"  http:// 这段是必须要的,否则找不到页面,那么打开的子页面可能还是父页面。或者相对路径 ../

      name:子窗口的句柄;就相当于是子窗口的一个名字,可以自定义。窗口的句柄

      param:子窗口的一些参数,使用“ , ”进行分隔;

        param可选参数

        注:以下参数可能要配合使用,单独使用某些参数可能不起作用,配合规则后续补充,看客们在使用时,请注意实现效果

        (其中yes/no也可使用1/0;pixel value为具体的数值,单位象素)
        参数 | 取值范围 | 说明 

        alwaysLowered   | yes/no |    指定窗口隐藏在所有窗口之后     
        alwaysRaised      | yes/no |         指定窗口悬浮在所有窗口之上     
        depended       | yes/no |       是否和父窗口同时关闭         
        directories       | yes/no |      Nav2和3的目录栏是否可见       
        height        | pixel value |  窗口高度           (要和宽度一起使用才会起作用,单位可有可无,不过最好带着)
        hotkeys           | yes/no |      在没菜单栏的窗口中设安全退出热键 
        innerHeight     | pixel value |     窗口中文档的像素高度 
        innerWidth     | pixel value |      窗口中文档的像素宽度 
        location         | yes/no |     位置栏是否可见 
        menubar       | yes/no |     菜单栏是否可见 
        outerHeight        | pixel value |      设定窗口(包括装饰边框)的像素高度 
        outerWidth              | pixel value |   设定窗口(包括装饰边框)的像素宽度 
        resizable       | yes/no |    窗口大小是否可调整 
        screenX        | pixel value |   窗口距屏幕左边界的像素长度     (指的是窗口弹出时的位置)
        screenY       | pixel value |   窗口距屏幕上边界的像素长度 
        scrollbars     | yes/no |     窗口是否可有滚动栏 
        titlebar         | yes/no |     窗口题目栏是否可见 
        toolbar         | yes/no |     窗口工具栏是否可见     (默认no;当为yes是和父窗口在同一个标签中打开,不会再打开新标签)
        Width        | pixel value |   窗口的像素宽度 
        z-look          | yes/no |     窗口被激活后是否浮在其它窗口之上

    Part2:应用实例

      1.打开一个进行基础设置过的窗口

    window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') 

      2.使用函数控制窗口的弹出 

    function openwin() {
        window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
    }
    //浏览器在读取页面之前调用函数打开窗口
    <body onload="openwin()"> 
    …任意的页面内容… 
    </body>
    //浏览器离开当前页面时,打开新窗口(已知不支持谷歌、Opera浏览器)。onunload事件见这里
    <body onunload="openwin()"> 
    …任意的页面内容… 
    </body>  

    其他的还可以通过按钮点击、a标签等触发。

       3.同时弹出两个窗口

    <script>
        function openwin() {
            window.open("http://www.baidu.com","new1","height=100, width=400")
         window.open("https://www.cnblogs.com/","new1","height=100, width=400")
      }
    </script>

      注意:上面两个窗口的大小和位置因为相同,会出现重叠。

      注意2:两个窗口的name不能相同

      4.通过a标签实现在打开一个窗口的同时,打开另一个小窗口

    <script>
        function openwin() {
            window.open("http://www.baidu.com","new1","height=100, width=400")
        } 
    </script>
    <body>
      <a href="https://www.cnblogs.com/" onclick="openwin()">点击打开博客园</a> 
    </body>

      注意:在打开大窗口之后,小窗口会被覆盖掉,所以不要觉得小窗口没了哦。

      注意2:按照这种逻辑,其实可以通知打开多个小窗口的,只要在 openwin 函数里添加多个 window.open() 就ok了。

      5.可以通过定时器关闭窗口

      注意:上面都是直接连接到已有的网站,这里是要在自己的网页代码里加内容

    <script language="JavaScript"> 
        function closeit() {
            setTimeout("self.close()",10000) //毫秒
        } 
    </script>    
    

      通过定时器控制显示的时长,使用 self.close() 函数控制自身的关闭  点这里看定时器的用法

  • 相关阅读:
    叩开抽象的大门(2)——依赖于抽象
    威老迷宫探险第二季如何更面向对象
    更佳的封装之路面向对象的封装思想
    威老的迷宫探险
    重用,我要重用!!!
    威老出国记,什么是引用,别名。
    叩开抽象的大门(1)——抽象类、接口
    maven常用命令
    大公司喜欢问的问题
    java 发送http请求
  • 原文地址:https://www.cnblogs.com/waterFowl/p/8762582.html
Copyright © 2011-2022 走看看