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() 函数控制自身的关闭 点这里看定时器的用法
window.open()参数详解及对浏览器的兼容性的更多相关文章
- Window.open()方法参数详解
Window.open()方法参数详解 1, 最基本的弹出窗口代码 window.open('page.html'); 2, 经过设置后的弹出窗口 window.open('page.html ...
- window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...
- php课程---Windows.open()方法参数详解
Window.open()方法参数详解 1, 最基本的弹出窗口代码 window.open('page.html'); 2, 经过设置后的弹出窗口 window.open('page.html ...
- $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解
[一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...
- 【转】jqGrid 各种参数 详解
[原文]http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.htmljqGrid 各种参数 详解 JQGrid JQGrid是一个 ...
- apache url rewrite 的RewriteRule参数详解
apache url rewrite 的RewriteRule参数详解 我们经常会在apache那边对一些url进行一些重写操作,那么就会涉及到很多的重写策略的选择,比如重定向的方式,参数的处理,规则 ...
- php setcookie(name, value, expires, path, domain, secure) 参数详解
setcookie() 定义一个和其余的 HTTP 标头一起发送的 cookie.和其它标头一样,cookie 必须在脚本的任何其它输出之前发送(这是协议限制).这 需要将本函数的调用放到任何输出之前 ...
- ASP.NET性能监视参数详解
性能监视器- Performance Monitor 性能监视器是Windows自带的系统资源和性能监视工具. 性能监视器能够量化地提供CPU使用率, 内存分配状况, 异常派发情况, 线程调度频率等信 ...
- 详解Google Chrome浏览器(操作篇)(一)
开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...
随机推荐
- redis基本类型和使用
redis存储数据的基本类型有:string(字符串类型).hash(散列类型).list(列表类型).set(集合类型).zset(有序集合类型). 依次做一些练习.redis命令不区分大小写. k ...
- 【吐槽向】iOS 中的仿射变换
什么是仿射变换矩阵 CGAffineTransform 实际上就是一个用于绘制 2D 图形的的仿射变换矩阵.仿射变换矩阵用于旋转.缩放.平移.扭曲(skew)在图形上下文中绘制的对象.CGAffine ...
- 使用git将本地代码传到github
方法可能有些小小的差别,但是最终的结果都是一样的 在github上新建代码仓库 确定之后会显示一个仓库的url,复制下来 在本地找一个作为本地仓库的文件夹右键Git Bash Here打开git 把g ...
- python 对模块的应用你还得练点这些
1.有如下字符串:n = "路飞学城"(编程题) - 将字符串转换成utf-8的字符编码的字节,再将转换的字节重新转换为utf-8的字符编码的字符串 - 将字符串转换成gbk的字符 ...
- nginx域名跳转技巧
1.地址重写:访问server_name的时候跳转到http://www.cnblogs.com/qinyujie/ 修改nginx配置文件.加入到server{...}字段或者location字段里 ...
- Spring Boot入门教程1、使用Spring Boot构建第一个Web应用程序
一.前言 什么是Spring Boot?Spring Boot就是一个让你使用Spring构建应用时减少配置的一个框架.约定优于配置,一定程度上提高了开发效率.https://zhuanlan.zhi ...
- 小细节,大用途,35 个 Java 代码性能优化总结!
前言: 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用 ...
- SIMD---AVX系列
AVX全称Advanced Vcetor Extension,是对SSE的后续扩展,主要分为AVX.AVX2.AVX512三种.在目前常见的机器上,大多只支持到AVX系列,因此其他SIMD扩展指令我们 ...
- 基于 HTML5 Canvas 实现的文字动画特效
前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的.文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读. ...
- 课堂作业 泛型类-Bag
自定义泛型类Bag 一.具体代码: 代码连接 二.伪代码: 1.思路: 老师讲完后我的想法是要做出一个类似于List的Bag,首先它的本身是又数组构成的并且是可自动增加长度的,然后实现一些基本的操作, ...