前言
最近的一些需求,折腾了一些时间,记录一下解决方案:
a标签window.open
现在浏览器一般会默认拦截除了用户点击之外的window.open操作,一般解决方法有:
直接在a标签中
<a href="javascript:void(0)" onclick="window.open(url)">点击</a>
但是项目里面有很多a标签,并且想在a标签触发window.open之前执行一些操作,如果放在ajax里面会被浏览器拦截,在网上查了一下,最终的写法是:
先在ajax操作前
var newWin = window.open('about:blank');
然后在ajax的success方法中:
newWin.location.href = url;
使用姿势
<a href="javascript:void(0)" onclick="window.open(url)">点击</a>
如果想在window.open之前处理业务逻辑的话,直接使用
$(dom).click(function(){
...
});
是会直接打开新窗口的。因为a标签在html 的onclick事件已经写了,优先级高于jquery的click事件,所以换个思路:
$(dom).mousedown(function(){
this.onclick = function(){return false;}
});
如果需要阻止a标签的window.open事件,直接使用上面里面的
...
this.onclick = function(){return false;}
...
这段代码即可;
同时,如果你想在mouseover函数里面获取a标签的onclick里面的window.open里面的网址的话,可以通过
this.getAttributeNode("onclick").nodeValue
获取到a标签的onclick函数的字符串,再通过正则或者字符串截取即可获取到网址的内容
监听新窗口关闭
未完待续。。。
完整代码:
$('a[onclick],li[onclick]').mousedown(function(){
var code = this.getAttributeNode("onclick").nodeValue; // 这里需要获取onclick里面window.open的点击事件里面的网址
if(code.indexOf(tag) != -1){
var that = this;
code = code.substr(code.indexOf("(")+2);
var url = code.substr(0,code.indexOf(",")-1);
//this.onclick = function(){return false;}
console.log(url);
var index = layer.load(2, {
shade:[0.5,'#000']
});
//这里可以放一个loading页面或者空白页面
var newWin = window.open(url+"&loading=1",'','width=1024,height=768');
$.ajax({
type:'POST',
url:'***',
data:{
'operateId':'{{ str_random(20) }}',
'api_code':url.substr(url.indexOf('api_code')+9)
},
//async: false,
success:function(res){
console.log(res.status.msg);
newWin.location.href = url;
layer.close(index);
}
});
//window.open(url,'',"width=1024,height=768");
}
});
网友评论