我在我的网站上有一个按钮，允许用户通过Yodlee/Plaid使用弹出的登录屏幕登录到他们的银行。问题是弹出窗口被safari和chrome手机屏蔽了。弹出窗口在桌面上工作。我读到过safari和chrome会阻止所有弹出窗口，如果用户没有点击按钮启动弹出窗口，或者弹出窗口从点击事件开始超过一秒。
我的问题是，在启动弹出窗口之前，我的前端必须调用我的后端来检索令牌。所有这些都需要超过一秒钟的时间，因此，阻止弹出窗口。我对JS还很陌生，如果能提供任何解决这个问题的意见，我将非常感激。
null
//makes call to backend to get yodlee access token
function getAccessToken(){
$.ajax({
url: "/request/access-token",
headers: {'X-CSRFToken': csrf_token},
type: "POST",
data: {'id': uuid},
dataType: "json",
context: document.body,
success: function(data){
var accessToken = data['access_token'];
openFastLink();
}
});
}
//opens fastlink popup
function openFastLink(){
window.fastlink.open({
fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
accessToken: 'Bearer ' + accessToken,
forceIframe: true,
iframeScrolling: true,
params: {
configName : 'Aggregation'
},
onSuccess: function (data) {
alert('account linked!')
}
},
'container-fastlink');
}<button onclick="getAccessToken">Link Account</button>null
您的单击不是激活open，ajax返回是。
如果您确信用户将需要访问令牌，只需获取它
我没有做一个实际的代码段，因为它不会在这里运行。
$(function() {
let accessToken;
$.ajax({
url: "/request/access-token",
headers: {
'X-CSRFToken': csrf_token
},
type: "POST",
data: {
'id': uuid
},
dataType: "json",
context: document.body,
success: function(data) {
accessToken = data['access_token'];
$("#linkAccount").show()
}
});
//opens fastlink popup
$("#linkAccount").on("click", function() {
window.fastlink.open({
fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
accessToken: 'Bearer ' + accessToken,
forceIframe: true,
iframeScrolling: true,
params: {
configName: 'Aggregation'
},
onSuccess: function(data) {
$("#linkAccount").hide()
$("#linked").show()
}
},
'container-fastlink');
});
});
.hide {
display: none;
}
<button type="button" id="linkAccount" class="hide">Link Account</button>
<div id="linked" class="hide">Account linked</div>
