点击事件弹出新的页面

  前两天将文本与测听功能的模块抽取到独立页面,出现了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();

 

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

 

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

附上大神回复:

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

posted @ 2017-03-16 15:11  名字不好起啊  阅读(3640)  评论(0编辑  收藏  举报