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 οnlοad="openwin()"> 
…任意的页面内容… 
</body>
//浏览器离开当前页面时,打开新窗口(已知不支持谷歌、Opera浏览器)。onunload事件见这里
<body οnunlοad="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/" οnclick="openwin()">点击打开博客园</a> 
</body>

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

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

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

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

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

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

转载于:https://www.cnblogs.com/waterFowl/p/8762582.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
window.open函数用于在新的窗口或标签页中打开一个页面或文件。它接受三个参数: 1. strUrl:要打开的页面或资源的URL地址。可以是一个完整的URL,也可以是相对路径。如果传入空值或空字符串,则会打开一个空白页面。 2. strWindowName:窗口的名称,用于后续对该窗口的引用。注意,它不是窗口的标题,而是用于标识窗口对象的名称。如果该参数为空,新窗口将没有名称,并且在后续无法通过名称引用。例如,在打开一个新窗口后,你可以通过传入相同的窗口名称来获取对该窗口的引用。 3. strWindowFeatures:窗口的描述参数,用于指定窗口的尺寸、位置、是否启用工具栏等特性。这个参数是一个包含各种窗口特性的字符串,可以用逗号分隔。具体可用的特性取决于浏览器的支持。 window.open函数返回对新打开的窗口的引用,即该窗口的window对象。通过这个引用,可以对新窗口进行操作,例如修改其内容、调用其方法等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [window.open用法详解](https://blog.csdn.net/qq_41694291/article/details/107877447)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值