上一篇文章《在浏览器新窗口中打开的几种方式》介绍了在浏览器中打开新窗口的一些场景，但没有提到在浏览器中打开新窗口时会遇到弹窗被拦截（或阻止）的情况。

本篇文章将从浏览器弹窗拦截（或阻止）机制的原理、按步骤重现浏览器弹窗被拦截的场景以及实现如何绕过浏览器弹窗拦截。

弹窗拦截的机制

浏览器安全机制中，页面弹窗，_必须是在用户触发的，才算合法弹窗_；由ajax 或定时执行的弹窗均为非用户触发。会被浏览器或相关安全软件理解为广告被拦截掉；

弹窗拦截的场景

通过点击（ajax）获取后端返回的参数，其中部分参数会在在打开新窗口中进行页面跳转时使用。例如：自动登录（单点登录）、文件下载（权限控制）等等。

场景

在前端业务开发过程中，需要从浏览器新窗口中打开的场景其实也有很多，下面一起来看看，实际应用场景，如下：

1、访问网站内部链接在本窗口打开，访问网站外部链接在新窗口打开

html:

1

// 内部链接地址，本窗口跳转 <a href="//www.hanyi.pro/blog/about">关于我</a>

1
2

// 外部链接地址，新窗口打开
<a href="https://github.com/hxrealm" target="_blank">Github</a>

2、站内搜索，将表单数据提交到新窗口中查询

html:

1
2
3
4

<form method="GET" action="http://www.baidu.com/s" target="_blank">
  <input type="text" name="wd" value="hxrealm" />
  <input type="submit" name="search" value="submit" />
</form>

背景介绍

在某前后端分离的项目中有一个根据用户的选择（可多选）查询相关记录的需求，后端接口由 Backend(java)提供。接口格式类似如http://www.domain.com/query?checked=1&checked=2&checked=3，可知其中 QueryString 的参数为 checked=1&checked=2&checked=3。前端为了实现需求将该字段的 key 定义为 checked，value 定义为 1&checked=2&checked=3 的字符串，生成{checked: "1&checked=2&checked=3"}一个对象做为参数，验证结果发现后端不能正常接收到 checked 的参数。

关键要点

• 前后端分离的项目采用了接口代理（request、http proxy）
• Backend 接口中定义 checked 为一个枚举类型 (checked)
• 前端数据对象中 key 不要相同，因此只能采用字符串方式

过程分析

1、检验 GET 请求参数值

1

通过断点调试查看业务逻辑处理过程中生成的GET请求参数值为checked=1&checked=2&checked=3

中国是桥的故乡，自古就有“桥的国度”之称,发展于隋,兴盛于宋。遍布在神州大地的桥、编织成四通八达的交通网络，连接着祖国的四面八方。

随着经济的发展以及社会的变迁，桥缩短了人类了解自然与社会在空间和时间上的距离。在中国有太多大家耳熟能详的大桥，例如：北京卢沟桥、南京长江大桥、武汉长江大桥、杭州钱塘江大桥、深圳湾大桥、虎门大桥等等。本篇文章以“桥”为点粗略地将前端开发模式的变迁串联起来。

那么什么是桥？

维基百科给出这样的定义：桥或桥梁是跨越峡谷、山谷、道路、铁路、河流、其他水域、或其他障碍而建造的结构，是一种由水面或地面突出来的高架，用来连着桥头桥尾两边路。

桥是一种用来跨越障碍的大型构造物。确切的说是用来将交通路线（如道路、铁路、水道等）或者其他设施（如管道、电缆等）跨越天然障碍（如河流、海峡、峡谷等）或人工障碍（高速公路、铁路线）的构造物。

背景介绍

近期正在参与某移动端项目的开发，其实现方案是采用 Hybrid App（混合应用）开发模式，H5 页面端一方面通过 jsBridge 与 Native webview 进行交互实现对应的交互效果，另一方面通过 Node 中间层与 Backend 进行交互实现对数据接口的对接（如下图所示）。在这个过程中我们把其中的一段交互方式进行抽象化且将联结着“桥头”（Native App）和“桥尾”（H5 Webpage）的中介（jsBridge）称为“桥”。

最近这几年随着移动互联网的快速发展，前端的开发模式已悄悄地从多页面混合开发模式到单页面前后端分离开发模式的转变，基于 MVVM 模式的前端框架得到了繁荣发展。它们主要是knockoutjs、reactjs、angularjs、vuejs等，其中尤雨溪开发的vuejs框架在国内得到开发者的认可和支持。

基于 MVVM 模式开发的框架能得到快速的发展主要得益于 2015 年 6 月份 ES2015 的正式发布（也就是 ES6），其中 Promise 被列为正式规范，作为 ES6 中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解 Promise 的基本概念与使用方法。