window.open新打开窗口与新开标签页
最近在使用window.open时忽略了一个细节问题:window.open新打开一个窗口,但是有时却是新打开一个窗口有时打开一个新标签页。虽然对一般的需求来说,这个两种情况都无所谓,但是对于那种有强烈区分的需求来说还是要注意的。那么怎么会出现这种不同的打开情况呢,这要从window.open方法的用法和不同浏览器来区分。
1、window.open的用法容易忽视的细节
window.open方法有三个参数:
window.open(url, [name], [configuration])
其中:
- url, 为要新打开页面的url
- name,为新打开窗口的名字,可以通过此名字获取该窗口对象
- configuration,为新打开窗口的一些配置项,比如是否有菜单栏、滚动条、长高等等信息
例如,新打开一个没有菜单栏、标题栏、工具栏,但是有滚动条、状态栏、地址栏且可伸缩窗口的方法调用如下:
window.open("index.html","newWindow","menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");
以上只是简要描述了window.open的方法,但是这个方法容易忽略的地方就是:新打开窗口名字可以是自定义的值,此外还可以是以下几个值,与超链接a的target属性值相同
窗口name值 | 描述 |
_blank | 默认的,在新窗口打开链接的url |
_self | 在当前窗口打开链接url |
_parent | 在父窗口打开链接url |
_top | 在顶级窗口打开url |
framename | 在指定的框架中打开链接url |
2、window.open打开新窗口还是打开新标签页
调用window.open是打开新窗口,还是打开新标签页,其实没有什么要紧关系,但是有些需求在这方面有很强的意愿时,那就得区分一下了。具体的打开什么还是根据具体情况来定的,以下结论是经过本人测试得出的,若有不正确的地方,请大家批评指正。
1、window.open(url)或者window.open(url, name),其中name为_blank
- 标准浏览器、IE9+是新标签打开链接url
- ie6-8是新窗口打开链接url
2、window.open(url, name),其中name为非_blank的其他4个值
此时会会在指定窗口或者frame打开链接url
3、window.open(url, name, configration)
只要配置了configration,所有浏览器都是新窗口打开链接url
3、使用window.open方法打开的窗口可能被拦截的替代方案
现在有些浏览器为了安全起见,可能会阻止window.open打开的链接url,不管是以标签还是以窗口打开。这时可能需要用户进行浏览器设置允许弹新页,让用户设置浏览器是极不可取的做法,尤其像电商类网站,那么有其他替代方案呢?
答案当然是有的,利用超链接打开的url是不会被拦截的可以实现这一点。具体做法是结合事件手动触发机制。下面是 HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截) 这篇博客给的一个简单的实例,这篇文章给出的事件分发机制是针对标准浏览器的:
html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Title</title> <script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
//var a = $('a')[0];
var a = $("<a href='http://www.apple.com' target='_blank'>Apple</a>").get(0); var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
a.dispatchEvent(e);
});
}); </script>
</head> <body>
<input type="button" value="Go to Apple" id="btn">
</body>
</html>
window.open新打开窗口与新开标签页的更多相关文章
- webdriver高级应用- 浏览器中新开标签页(Tab)
#encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...
- js中的window对象:打开窗口
~~ window.open():打开一个窗口 里面需要放三个参数: 1.打开窗口(网页)的位置: 2.打开的方式(自身页面,新开页面): 其中_blank新开一个窗口 3.打开网页的属性: wind ...
- Window.open 实现导航与打开窗口,导航到一个特定链接地址,也可以打开一个新的浏览器窗体
语法 window.open(strUrl,strWindowName,strWindowFeatures ,replace) strUrl: 打开资源的地址 strWindowName: 表示窗体名 ...
- 几个主流浏览器 Window.open打开新窗口 、模拟a标签打开新窗口的 表现
Window.open打开新窗口 1.常用浏览器打开新窗口(正常打开window.open)的的不同表现形式(PC/移动端) 2.Window.open在异步处理中打开(_blank) a标签在异步处 ...
- 打开新窗口(window.open)关闭窗口(window.close)
打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL: ...
- 打开自定义链接新窗口(safari JS prompt的坑!)2016.03.08
很简单的一个小练习,但做的过程中发现safari的一个坑,使用prompt()方法的时候,点击取消和不输入一样,会返回空字符' ',而不是null! 要求: 制作新按钮,"新窗口打开网站&q ...
- HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)
当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...
- (转载)HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)
原文: http://www.cppblog.com/biao/archive/2010/08/21/124196.html 当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实 ...
- C# GridView点击某列打开新浏览器窗口
C# GridView点击某列打开新窗口的方式: (1)打开浏览器新窗口:蓝色部分 通过超链接. (2)打开模式化窗口:通过OnRowCommand事件,弹出模式化窗口. 具体如下: <asp: ...
随机推荐
- EasyUI 分页 简洁代码
做分页代码,看到网上很多人实现的方法,那是各种调用,各种获取对象.我很不解,因为Easyui已经给我们了分页的具体实现,为什么有些人要画蛇添足呢. 其实真正的分页,在你的代码中,别人可能都没有注意到, ...
- 2019.02.09 bzoj4455: [Zjoi2016]小星星(容斥原理+dp)
传送门 题意简述:给一张图和一棵树(点数都为n≤17n \le17n≤17),问有多少种给树的标号方法方法使得图中去掉多余的边之后和树一模一样. 思路: 容斥好题啊. 考虑fi,jf_{i,j}fi, ...
- abaqus学习笔记-abaqus与umat调用基本原理
参考: 1.http://ivt-abaqusdoc.ivt.ntnu.no:2080/v6.14/books/sub/default.htm 2.ABAQUS 用户材料子程序开发及应用-杨曼娟 3. ...
- Attr类型
Attr表示元素的特性,在所有浏览器中,都可以访问Attr类型的构造函数和原型. attr特性存在于元素的attributes属性中的节点 nodeType 2 nodeName 特性的名称 node ...
- vmware虚拟机centOs安装教程
1安装vmware 虚拟机软件 1.解压vmware安装 汉化vmware虚拟机 复制注册码,并填写进vmware 2安装linux(centos)虚拟机 1. 点击文件----->新建虚拟机 ...
- (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能
转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...
- Forward团队-爬虫豆瓣top250项目-需求分析
一. 需求:1.爬取豆瓣电影top250. 2.获取电影名称,排名,分数,简介,导演,演员. 3.将爬取到的数据保存,以便随时查看. 3.可以将获取到的数据展示给用户. 二. 参考: 豆瓣api参考资 ...
- web-day15
第15章WEB15-AJAX和JQuery案例篇 今日任务 使用AJAX完成用户名的异步校验 使用JQuery完成用户名异步校验 使用JQuery完成商品信息模糊显示 使用JQuery完成省市联动效果 ...
- noip第33课作业
1. 排座椅 [问题描述] 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同 ...
- Verilog 99题之001-009
001. 画出CMOS反相器的电路原理图. 衬底的连接问题.PMOS衬底接电源,NMOS衬底接地 002. 反相器的速度与哪些因素有关?什么是转换时间(transition time)和传播延迟(pr ...