因为篇幅,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() 函数控制自身的关闭  点这里看定时器的用法

window.open()参数详解及对浏览器的兼容性的更多相关文章

  1. Window.open()方法参数详解

    Window.open()方法参数详解 1, 最基本的弹出窗口代码   window.open('page.html'); 2, 经过设置后的弹出窗口   window.open('page.html ...

  2. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  3. php课程---Windows.open()方法参数详解

    Window.open()方法参数详解 1, 最基本的弹出窗口代码   window.open('page.html'); 2, 经过设置后的弹出窗口   window.open('page.html ...

  4. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

  5. 【转】jqGrid 各种参数 详解

      [原文]http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.htmljqGrid 各种参数 详解 JQGrid JQGrid是一个 ...

  6. apache url rewrite 的RewriteRule参数详解

    apache url rewrite 的RewriteRule参数详解 我们经常会在apache那边对一些url进行一些重写操作,那么就会涉及到很多的重写策略的选择,比如重定向的方式,参数的处理,规则 ...

  7. php setcookie(name, value, expires, path, domain, secure) 参数详解

    setcookie() 定义一个和其余的 HTTP 标头一起发送的 cookie.和其它标头一样,cookie 必须在脚本的任何其它输出之前发送(这是协议限制).这 需要将本函数的调用放到任何输出之前 ...

  8. ASP.NET性能监视参数详解

    性能监视器- Performance Monitor 性能监视器是Windows自带的系统资源和性能监视工具. 性能监视器能够量化地提供CPU使用率, 内存分配状况, 异常派发情况, 线程调度频率等信 ...

  9. 详解Google Chrome浏览器(操作篇)(一)

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

随机推荐

  1. 如何恢复(初始化)android studio所有设置

    android studio是个大家伙,安装的时候经常出现一些问题,使用的时候也经常出现一些问题,如果,我是说如果,当你遇见一些问题不能解决的时候,可以试试重置android studio来解决问题, ...

  2. QT 创建一个具有复选功能的下拉列表控件

    最近研究了好多东西,前两天突然想做一个具有复选功能的下拉列表框.然后在网上"学习"了很久之后,终于发现了一个可以用的,特地发出来记录一下. 一.第一步肯定是先创建一个PROJECT ...

  3. for语句 2017-03-17

    一.for语句 For(初始条件:循环条件:状态改变) { 循环体 } 步骤: 1.  先判断条件 2.  如果满足条件,执行循环体 3.  状态改变 例题: 1. i++和++i 的区别: var ...

  4. Nginx配置ThinkPHP下的url重写(隐藏入口)

    搭建好项目后,在网址上输入域名,只能访问首页,其他页面全是404. 在域名后面和控制器前面加上index.php就可以访问. 在tp5官网手册查找后进行配置修改. 打开nginx.conf 后 ,在s ...

  5. ajax利用FormData异步文件提交

    通常情况下,我们上传文件都会使用form表单来提交文件.但有时候,我们会有异步提交文件的需求,在这种情况下,我们就需要新建一个Formdata来提交文件,后台如果使用的是PHP的话可以使用$_FILE ...

  6. java创建运行以及项目结构

    一 创建java project 再src下添加class,选择一个class添加main方法作为程序的入口 二.项目结构: src下添加不同的包,命名方法为com.jikexueyuan.hello ...

  7. spring Boot+spring Cloud实现微服务详细教程第一篇

    前些天项目组的大佬跟我聊,说项目组想从之前的架构上剥离出来公用的模块做微服务的开发,恰好去年的5/6月份在上家公司学习了国内开源的dubbo+zookeeper实现的微服务的架构.自己平时对微服务的设 ...

  8. Java基础_Java概述

    Java_概述 特点: 平台的移植性 开源 面向对象 多线程 安全性 工作方式: 先编译再解释执行. 先通过Javac命令将Java源代码编译成字节码文件(bytecode,类文件,.class,中间 ...

  9. ASP.NET Core 2.0 : 八.图说管道

    本文通过一张GIF动图来继续聊一下ASP.NET Core的请求处理管道,从管道的配置.构建以及请求处理流程等方面做一下详细的研究.(ASP.NET Core系列目录) 一.概述 上文说到,请求是经过 ...

  10. 面试:Handler 的工作原理是怎样的?

    面试场景 平时开发用到其他线程吗?都是如何处理的? 基本都用 RxJava 的线程调度切换,嗯对,就是那个 observeOn 和 subscribeOn 可以直接处理,比如网络操作,RxJava 提 ...