点击事件弹出新的页面

　　前两天将文本与测听功能的模块抽取到独立页面，出现了bug，页面本身没问题，主要是双击通话列表加密数据后异步跳转到2页面出现的问题。新窗口会被拦截掉，吐槽一下，为什么js中使用 window.open() 打开新的页面要被拦截，有什么关系！

　　之前是用angular做的单页面应用，通过路由跳转，所以没有此问题，抽出来后发现了这个问题，会自动拦截，除非手动进行设置不拦截新弹出窗口，否则逃不掉拦截TOT。

　　查了好多方法，什么模拟表单提交跳转，创建a标签跳转等，花样是挺多，可是都没什么用，该被拦截还被拦截，而且我还想说，百度出的页面60%的内容都是一样的。。。可不可以人性化一点，雷同的就判断时间扔掉算了。抄袭可耻！

　　这里整理一下打开新页面知识点，虽然会被拦截，但单页面应用依然可以用到。

 

js自带window.open()：

window.open(url, '_self');//本窗口打开
window.open(url, '_blank');//新窗口打开
//第二参数可省，默认新窗口打卡

//还有一种打开新页面，重给地址的方法
 var openWin = window.open();
 openWin.location = url;

var w = window.open();
$.get(url, function (data) {
    w.location.href = url;
})

 

使用a标签，调用其点击方法：

var a = "<a href='" + url + "' target='_blank' >jump</a>";
$("body").append(a);
var btn = $(a).get(0);
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
btn.dispatchEvent(e);

var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("target", "_blank");
a.setAttribute("id", "openwin");
document.body.appendChild(a);
a.click();

var a = '<a id="openWin" href=' + url + '></a>';
$('body').append(a);
$('#openWin').click();

 

使用表单提交，跳转到新页面：

var tempForm = '<form method="get" ' +
                'target="_blank" ' +
                'action="' + url + '">' +
                '<input type="hidden" name="id" value="' +
                value + '">'  + '</form>';    
var $tempForm = $(tempForm);
$("body").append($tempForm);
$tempForm.submit();
$tempForm.remove();

 

后期遇到会继续添加，方法很多，但是都没有解决跳转弹出新页面问题，我只能感叹，浏览器才是最强的。

 

加一句：异步请求后打开新页面是不行的，所以可以使用同步请求方式直接打开页面。

附上大神回复：

这样就能直接进行各种新页面打开啦！

转载于:https://www.cnblogs.com/guofan/p/6559614.html