一、问题描述

最近在做项目的时候碰到了使用window.open被浏览器拦截的情况，虽然在自己的环境可以对页面进行放行，但是对用户来说，不能要求用户都来通过拦截。何况当出现拦截时，很多用户根本不知道发生了啥，不知道在哪里看被拦截的页面。因此必须通过代码来解决这个问题！

以下是浏览器拦截示例：

 二、问题分析 
浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的，所以它认为这是不安全的就拦截了，即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为（trigger('click')），浏览器也会认为不是由用户主动触发的，因此不能被安全执行，所以被拦截。
 
三、window.open()语法
  1. window.open(url, name, features, replace)
  2. 　　Arguments - 参数　　url
  3. 　　可选字符串参数，指向要在新窗口中显示的文档的URL。如果省略该参数，或者参数为空字符串，新窗口不会显示文档。
  4. 　　name
  5. 　　可选字符串参数，该参数可以设置新窗口的名称。
  6. 　　相同name的窗口只能创建一个，要想创建多个窗口则name不能相同。
  7. 　　features
  8. 　　可选字符串参数，该参数用于设定新窗口的功能。因为该参数是可选的，如果没有指定该参数，新窗口有所有的标准功能。
  9. 　　replace
  10. 　　可选布尔参数，设置新窗口中的操作历史的保存方式。
  11. 　　true - 创建新历史记录
  12. 　　false - 替换旧的历史记录
  13. Returns - 返回值
  14. 　　一个根据name参数对新创建的或已存在的窗口对象的引用。
  15. Description - 描述
  16. 　　open()方法可以查找一个已经存在的或者新建的浏览器窗口。如果name参数指定了一个已经存在的刘浏览器窗口，则返回对该窗口的引用。返回的窗口中将显示URL中指定的文档，但是features参数会被忽略。open()方法是JavaScript中唯一通过名称获得浏览器窗口引用的途径。
  17. 　　如果没有指定name参数，或者不存在name参数指定的名称的窗口，open()方法将创建一个新的浏览器窗口。
  18. 　　name参数用于指定新窗口的名称，该名称必须由字母、数字和下划线字符组成。它可以被HTML文档中的<a>标记或<form>标记指向。
  19. 　　当你使用window.open()方法加载一个新的文档到一个已经存在了命名的窗口中时，你可以通过replace参数设置历史记录的保存方式.。如果该参数是true, 新文档的历史记录将取代旧文档的历史记录。 如果该参数为false或这没有指定该参数，新的文件在窗口的浏览历史记录中将建立自己的条目。该参数提供了location.replace()相同功能的方式。
  20. 　　不要把"Window.open( ) "和"Document.open( )"混淆；这是两个完全不一样的方法。为了让代码更明晰，你可以用"Window.open( )"代替 "open( )"。作为HTML属性定义事件处理程序时， "open( )" 一般被解释为"Document.open( )"，所以在这种情况下，你必须使用"Window.open( )"。
  21. Window Features - 窗口特性
  22. 　　feature参数是一个用逗号分隔的功能列表。如果该参数为空或者没有指定该参数，新的窗口将拥有所有的功能。另一方面, 如果feature参数只指定了某一项或某几项功能，那么其他没有被指定的功能将不会出现在新的窗口中。该字符串不能包含任何空格或其它空字符串。
  23. 　　列表中的每个元素的格式：功能[=值]
  24. 　　对于绝大多数的功能来说，它们的值一般都是yes或no。对这些功能，等号和值都可以省略不写。 对于 width和height特性，必须给它们指定一个以像素为单位的值。
  25. 　　一下是一些普遍支持的功能和它们的含义：
  26. 　　height
  27. 　　设定窗口显示区域的像素宽度
  28. 　　left
  29. 　　浏览器窗口距离屏幕左边的距离
  30. 　　location
  31. 　　指明地址栏在新窗口中是否可见
  32. 　　menubar
  33. 　　指明菜单栏在新窗口中是否可见
  34. 　　resizable
  35. 　　指明新窗口是否可以调整大小
  36. 　　scrollbars
  37. 　　指明滚动栏在新窗口中是否可见
  38. 　　status
  39. 　　指明状态栏在新窗口中是否可见
  40. 　　toolbar
  41. 　　指明工具栏在新窗口中是否可见
  42. 　　top
  43. 　　设定新窗口距屏幕上方的距离
  44. 　　width
  45. 　　设定窗口显示区域的像素宽度
  46. 　　alwaysLowered
  47. 　　指定窗口隐藏在所有窗口之下
  48. 　　alwaysRaised
  49. 　　指定窗口浮在所有窗口之上
  50. 　　dependent
  51. 　　指定打开的窗口为父窗口的一个子窗口。并随父窗口的关闭而关闭
  52. 　　directions
  53. 　　指定Navigator 2和3的目录栏是否在新窗口中可见
  54. 　　hotkeys
  55. 　　在没有菜单栏的新窗口设置安全退出热键
  56. 　　innerHeight
  57. 　　设置新窗口中文档的像素高度
  58. 　　innerWidth
  59. 　　设置新窗口中文档的像素宽度
  60. 　　menubar
  61. 　　指明菜单栏在新窗口中是否可见
  62. 　　outerHeight
  63. 　　设定窗口（包括装饰边框）的像素高度
  64. 　　outerWidth
  65. 　　设定窗口（包括装饰边框）的像素宽度
  66. 　　screenX
  67. 　　设定新窗口离屏幕边界的像素长度
  68. 　　screenY
  69. 　　设定新窗口离屏幕上边界的像素长度
  70. 　　titlebar
  71. 　　指明菜单题目栏在新窗口是否可见
  72. 　　z-look
  73. 　　在文档中包含各个 <pplet>标签的数组
  74. 　　fullscreen
  75. 　　打开的窗体是否进行全屏显示

 四、代码模拟

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>测试弹框拦截</title>
  6.   <script>
  7.     window.open("http://www.cnblogs.com/chenyablog/","测试弹框","top=nInt,left=nInt,width=nInt,height=nInt,location=yes,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no");
  8.   </script>
  9. </head>
  10. <body>
  11.    <h1>测试弹框拦截</h1>
  12. </body>
  13. </html>
 
 五、解决方案
在ajax请求之前，先用window.open 打开一个空白窗口，然后在ajax的响应函数中设置该窗口的location属性为新的url。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>测试弹框拦截</title>
  6.   <script>
  7.     async displayProjectileFrame (type) {
  8.       const title = '测试弹框拦截'
  9.       // 先打开一个窗口
  10.       let newWindow = window.open()
  11.       //给新窗口设置标题
  12.       newWindow.document.title = title
  13.       try {
  14.         const base = 'xxxxxxxxxx'
  15.           // 这里是模拟ajax，不同使用场景需要有所变化
  16.         const openUrl = await this.$axios.$get('/xxx/xxxx', {
  17.           params: {
  18.             base
  19.           }
  20.         })
  21.         if (openUrl) {
  22.           // 重定向
  23.           newWindow.location = openUrl
  24.         }
  25.       } catch (e) {
  26.         this.$axiosError(e)
  27.       }
  28.     }
  29.   </script>
  30. </head>
  31. <body>
  32.    <h1>测试弹框拦截</h1>
  33. </body>
  34. </html>

六、小结

  1. 上面方法，存在一个问题时，因为先打开了空白窗口，如果ajax请求失败（网络或业务逻辑问题）后， 新窗口中就不会有正常的结果体现，有可能造成用户疑惑。
  2.  
  3. 一个解决办法是，当ajax出现问题时，可以考虑给出一个提示，如   newWindow.document.write("服务器处理异常");
  4.  
  5. 甚至为了防止ajax响应时间过长，当窗口新建后，立即给出提示  newWindow.document.write("服务器正在处理中，请稍后");
  6.  
  7. 后面如果ajax正常返回，则因为设置了location值，原来打印的信息会被新的页面信息覆盖。

七、思考

  1. 对于动态打开新窗口，没有特别完美的方法。具体还需根据特定的业务场景来采取相应的做法！

window.open()被浏览器拦截问题汇总的更多相关文章

  1. window.open被浏览器拦截的解决方案

    现象 最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,搞得人无比郁闷啊,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截.何况当出现拦截时,很多小白根 ...

  2. javascript中的window.open()被浏览器拦截

    最近做项目的时候,点击事件的时候遇到了window .open()被浏览器拦截的情况,虽然在自己的开发环境中都能正常使用,但是放在测试环境中window.open()就是不能使用, 后来经过测试,单纯 ...

  3. 【转载】window.open被浏览器拦截的解决办法

    今天在处理程序的过程中,发现window.open方法会被浏览器拦截,导致无法打开新页面,查阅相关资料后发现,主要原因是浏览器为了维护用户安全和体验,禁止在javascript中直接使用window. ...

  4. window.open 防止浏览器拦截

    https://blog.csdn.net/sinat_37255207/article/details/89374416 网上试了很多方法 最终只有一种可以 var newWin = window. ...

  5. window.open打开新窗口被浏览器拦截的处理方法

    一般我们在打开页面的时候, 最常用的就是用<a>标签,如果是新窗口打开就价格target="_blank"属性就可以了, 如果只是刷新当前页面就用window.loca ...

  6. js实现window.open不被拦截的解决方法汇总

    一.问题: 今天在处理页面ajax请求过程中,想实现请求后打开新页面,就想到通过 js window.open 来实现,但是最终都被浏览器拦截了. 二.分析: 在谷歌搜索有没有解决方法,有些说可以通过 ...

  7. 如何使用 window.open（） 处理ajax请求返回的url： 在本页面打开并防止浏览器拦截

    ajax请求中用window.open()打开请求返回url(例如实现下载功能时),可能会因为跨域问题导致浏览器拦截 解决办法是:在请求前,打开一个窗口,请求成功后将返回的url直接赋值给该窗口的hr ...

  8. ajax回调中window.open弹出的窗口会被浏览器拦截的解决方法

    存在问题:处理页面ajax请求过程中,异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法 来实现,最终都被浏览器拦截了.不会跳到对应的页面,如下 原因:浏览器之所以拦截 ...

  9. window.open方法被浏览器拦截的处理方式

    问题现象 当我们在一个 ajax 回调中执行 window.open 方法时,新页面会被浏览器拦截. 原因 在 Chrome 的安全机制里,非用户直接触发的 window.open 方法,是会被拦截的 ...

随机推荐

  1. kali linux之Backdoor-factory

    Backdoor-------python编写 适用于windows PE x32/x64 和Linux ELF x32/x64(OSX),支持msf payload 自定义payload 将shel ...

  2. API自动化测试 Soap UI工具介绍

    一.   建立测试用例 (一)   基本概念 soapUI 中工程的层次结构 项目名称:位于最上层 (BookStoreTest),项目可以包含多个服务的定义. REST 服务定义:服务其实是对多个 ...

  3. ZooKeeper参数

    原文连接:https://www.cnblogs.com/skyl/p/4854553.html ZooKeeper参数调优   zookeeper的默认配置文件为zookeeper/conf/zoo ...

  4. tableView header Refresh 下拉刷新/上拉加载

    一. UIScrollView 的分类 //作为入口 #import <UIKit/UIKit.h> #import "RefreshHeader.h" #import ...

  5. POJ_3268 Silver Cow Party 【最短路】

    一.题面 POJ3268 二.分析 该题的意思就是给定了一个由每个节点代表农场的有向图,选定一个农场X办party,其余农场的都要去,每个农场的cow都走最短路,走的时间最久的cow耗时多少. 了解题 ...

  6. Shiro源码解析-Session篇

    上一篇Shiro源码解析-登录篇中提到了在登录验证成功后有对session的处理,但未详细分析,本文对此部分源码详细分析下. 1. 分析切入点:DefaultSecurityManger的login方 ...

  7. .Net C# 泛型序列化和反序列化JavaScriptSerializer

    项目添加引用System.Web.Extensions /// <summary> /// 泛型序列化 /// </summary> public class JsonHelp ...

  8. Java 的多态

    1    多态的概念 多态(?) 可以理解为多种状态/多种形态 同一事物,由于条件不同,产生的结果不同   程序中的多态 同一引用类型,使用不同的实例而执行结果不同的. 同:同一个类型,一般指父类. ...

  9. 如何去除内联元素（inline-block元素）之间的间距

    <body><a href="http://www.baidu.com">百度</a><a href="http://www.i ...

  10. Request.QueryString 的用法

    比如常见的URL网页地址都有 xxx.asp?type=reLogin   ?号后面的就是querystring querystring是asp中获取数据的一个方法. 那么就可以用request.qu ...