最近在使用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新打开窗口与新开标签页相关推荐

  1. 页面之间跳转、新打开窗口跳转

    页面之间进行跳转 //code为传递的参数,以&进行参数拼接 window.location.href = "http://58.56.27.54:38102/bi/Viewer?c ...

  2. 浏览器中新开标签页(Tab)

    #!usr/bin/env python #-*- coding:utf-8 -*- """ ab @author: sleeping_cat @Contact : zw ...

  3. C# Selenium ChromeDriver 新开标签页操作方法

    C# Selenium ChromeDriver 新开标签页操作方法 网上找了好多方法,都是Java的方法,在C#里都无法正常新开标签页. 有的说借助快捷键Ctrl+T,尝试失败. 后来看到某大侠采用 ...

  4. selenium使用webdriver新开标签页

    from selenium import webdriveroption = webdriver.ChromeOptions() browser = webdriver.Chrome(chrome_o ...

  5. webdriver高级应用- 浏览器中新开标签页(Tab)

    #encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...

  6. 火狐浏览器(Google搜索引擎)点击新链接默认为在新版标签页打开链接

    参考链接1: (已解决)使火狐浏览器默认在新版标签页打开链接_可可与鱼的博客-CSDN博客_火狐浏览器设置打开网页在新的标签 参考链接2: google设置在新标签页打开的方法_科大云炬的博客-CSD ...

  7. 三招快速重新打开被关闭的Chrome标签页

    在 Chrome 这样的多标签页浏览器中,不小心关闭一个标签页实在是太常见的事情了.当这种情况发生时,我们有三个办法可以重新打开这个刚刚关闭的页面. 1,打开一个新的标签页,在新标签页页面最下方会有一 ...

  8. iterm2 新建标签页使用当前文件夹路径新开标签页

    打开Preferences command+, 选择 profiles working Directory

  9. 如何使谷歌浏览器打开书签时新开标签页?

    谷歌浏览器有一些地方本土化做得不够好,比如:每次打开书签时都会覆盖原页面,不符合中国人使用浏览器的习惯.这让笔者很蛋疼,尝试了很多网友提供办法依旧不能成功,今天终于发现了一个插件可以很完美地解决这个问 ...

最新文章

  1. 【学神-RHEL7】1-4-1-Linux文件管理和恢复误删除的文件
  2. oracle 控制文件在哪里设置_从Oracle到PostgreSQL:最全控制文件
  3. linux内核网络协议栈--数据包的接收过程(二十二)
  4. BZOJ 3740. 【TJOI2014】电源插排
  5. webpack来打包你的vue项目,如发现你的vendor.js过大
  6. 怎么恢复php格式关联,SCN与数据恢复关联
  7. 怎么调出全局搜索_局部静态变量只能初始化一次?它是怎么实现的
  8. 关于co-NP的理解
  9. 触控屏c语言程序,触摸屏编程软件 C-more Micro Programming Software V3.0
  10. 如何卸载mysql server 2005_彻底的卸载SQL Server2005
  11. 典型ieee3机9节点电力系统潮流分析_【最新学术进展】清华大学电机系牵头研究推出高比例可再生能源电力系统标准测试系统HRP38...
  12. 环境配置之:pip 一步到位解决 pytorch-gpu 安装
  13. 浙江利捷分析报告(0612)
  14. 【微软雅黑字体的简单介绍】
  15. 金融数据中心建设模式浅析
  16. Uboot pmic调试
  17. 历经一个月研究,发布两款机器人,小白就会python自己制作机器人了
  18. 环境变量setenv函数和export命令的解释
  19. idea中文件被Mark as Plain Text后恢复
  20. Datawhale十月组队学习_推荐系统3

热门文章

  1. java 魔方_魔方小站java下载和修改安全等级方法
  2. 重温清除浮动方法,逐句解释clearfix的意义
  3. CC00038.kafka——|Hadoopkafka.V23|——|kafka.v23|消费者拦截器参数配置|
  4. 如何在iPad上充分利用各种笔记软件进行学习或办公——marginnote、goodnotes和onenote的优缺点以及我的使用场景
  5. dnf显示服务器关闭吗,DNF手游:服务器关闭公告下架,17号游戏照玩,网友:我心态崩了...
  6. 无法修改html 默认打开,默认网页无法修改
  7. excel 公式 单引号 concat_这18则经典公式,帮你全面解决各种日期计算难题
  8. 为什么web前端工程师的招聘越来越多
  9. python入门指南-Python入门指南
  10. 好莱坞十部最动人的爱情电影