标签：style blog http color io os ar for sp
事情是这样的：我们后台人员有一个需求，希望在ajax请求成功后的回调函数里，新窗口打开一个页面。示例代码如下：
$("#btn").on("click",function(){
$.ajax({
url : "opendata.html",
type : "post",
data : {"a" : 1},
success : function(){
window.open("http://www.baidu.com")
}
})
})
但是这样是不行的，浏览器会阻止页面的打开。于是整理了一下网上绕过这个问题的方法，并测试了一下（我测试了IE，火狐，谷歌，Safari浏览器），现在说说我的测试情况：
有三种办法绕过这个问题，第一种方法代码如下：
$("#btn").on("click",function(){
var tempWin = window.open("","_blank")
$.ajax({
url : "opendata.html",
type : "post",
data : {"a" : 1},
success : function(){
tempWin.location = "http://www.baidu.com"
}
})
})
这个方法是在ajax请求之前，先打开一个空白窗口，然后在回调中改变窗口的url实现的，在windows系统中，我测的浏览器都是ok的，都能够新窗口打开页面。
第二中方法代码如下：
function openwin(url) { var a = document.createElement("a"); a.setAttribute("href", url); a.setAttribute("target", "_blank"); a.setAttribute("id", "openwin"); document.body.appendChild(a); a.click(); } $("#btn").on("click",function(){ $.ajax({ url : "opendata.html", type : "post", data : {"a" : 1}, async : false, success : function(){ openwin("http://www.baidu.com") } }) })
这个方法是用a标签来模拟window.open()。不过要注意的是，这个方法必须把ajax改成同步的方式，否则还是会阻止新页面打开。还要注意的是，即使采用了同步的方式，Safari浏览器始终打不开页面。
第三种方法代码如下：
function openUrl( url ){ var f=document.createElement("form"); f.setAttribute("action" , url ); f.setAttribute("method" , ‘get‘ ); f.setAttribute("target" , ‘_black‘ ); document.body.appendChild(f) f.submit(); } $("#btn").on("click",function(){ $.ajax({ url : "opendata.html", type : "post", data : {"a" : 1}, async : false, success : function(){ openUrl("http://www.baidu.com") } }) })
与第二中方法类似，这里用到了form标签模拟window.open()。同理也需要把ajax改成同步的方式。令人高兴的是Safafi浏览器用这个方法能够打开新页面。
以上的测试都是在windows系统下的结果。我们换到苹果系统下，在苹果系统下Safari浏览器对这三个方法都失效了。
通过以上测试，在回调中打开新页面这个交互不可取。
标签：style blog http color io os ar for sp
原文地址：http://www.cnblogs.com/qiaotaojin/p/4052490.html
