前端页面打开新窗口的实现过程

在网页中打开新的新窗口一般可以a标签进行跳转并设置其属性target为_blank，代码如下：<a target="_blank" href=" https://www.baidu.com/"></a>。

但是如果有以下的场景：

需要先调用一段ajax，然后再进行跳转，此时使用a标签跳转显然不能满足需求。

尝试如下的方法：

1).给a标签的href赋值

2).设定a标签的target属性值为"_blank"

3).触发点击事件

或者使用window.open()进行跳转新页面的操作。

虽然思路很简单，并且实现起来并没有难度，但笔者实打实地踩了两个坑。

第一个问题：在页面上获取元素时，笔者一开始使用jquery方法，采用$(".class")的方式，这样产生的问题是获取到了jquery对象，而且并非dom元素，此时在上面绑定click事件会产生无效的情形。故在获取dom元素时一定要记得必须获得真实的dom元素。

第二个问题：笔者一开始在ajax的回调方法里，触发a标签的click事件，发现页面并没有进行相应的跳转并且打开新的页面，新弹出的窗口被拦截了，查找资料后，原因如下：现在的浏览器默认设置是，window.open()方法只能在click事件的程序线程中执行，也就是必须触发click事件，如果事件中用ajax之类，就必须是同步模式，让代码都在同一个线程中执行，异步模式会开启一个新的线程，就不能执行window.open()了。

最后解决的方案是：

$.ajax({

type:"post",

url:"url",

dataType:"json",

async : false, //设置为同步

data : {},

timeout:5000,

success : function(result) {

},

error:function (XMLHttpRequest, textStatus, errorThrown){

var result = eval('(' + XMLHttpRequest.responseText + ')');

}

});

//执行跳转

$('dom').click();