ajax回调中使用window.open弹窗被chrome拦截的问题

文章转自:https://segmentfault.com/q/1010000006760018

具体解决方法:

这种情况出现是由于window.open的执行时机,你的window.open是在ajax回调中执行,无论是同步还是一步,等待ajax返回结果需要一定的时间,当你得到结果再去执行window.open,chrome认为这是一种不友好的行为(非用户主动点击打开弹窗),所以会被屏蔽。
碰巧在之前的项目中也遇到过,试了各种方法,最后发现没有什么特别完美的方法可以绕开这个限制,使用了一个方法:用户点击时立马打开一个空白页,然后等ajax回来的结果,拿到链接地址,替换掉之前空白页的url。

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');

    setTimeout(function(){ // 异步,模拟ajax
        wi.location.href = 'http://google.com';
    }, 500);
});

如果网络正常能返回url地址倒不会造成太大的用户体验上的问题,就怕没法正常返回url,这个时候用户那块就出现了一个空白页,如果产品必须重新打开且能返回url的几率非常高,相对来说这个方案没那么糟糕,如果产品没法接受这种情况,那就老老实实刷新当前页吧。



layer.open 是一个常用的 JavaScript 弹窗插件,它可以通过调用 API 来创建模态框、消息框和页面层等类型的弹窗。如果你在 layer 弹窗实现了一个确认操作,并希望在确认之后刷新父页面的表格,你可以通过以下步骤来实现: 1. 创建 layer 弹窗并设置好确认按钮的回调函数。 2. 在确认按钮的回调函数编写刷新父页面表格的代码。这可以通过执行 JavaScript 的 `location.reload()` 方法来刷新整个页面,或者如果表格是通过 AJAX 异步加载的,则可以通过调用相应的 AJAX 请求函数来刷新表格数据。 以下是一个简单的示例代码,展示了如何在 layer 弹窗确认后刷新父页面的表格: ```javascript // 假设有一个函数用于异步获取表格数据并更新DOM function refreshTableData() { // 这里是 AJAX 请求获取数据的代码 // 假设请求成功后,调用一个函数更新表格内容,比如:updateTableContent(data); } // 使用 layer.open 打开弹窗,并设置确认按钮的回调 layer.open({ type: 1, // 提示层 title: '确认操作', content: '确认要执行操作吗?', yes: function(index, layero) { // 执行确认后的操作 // 比如先进行某项数据的更新或者其他逻辑处理... // 确认后刷新表格数据 refreshTableData(); }, area: ['500px', '300px'] // 弹出层的大小 }); // 你的表格刷新函数,假设 AJAX 请求成功后会被调用 function updateTableContent(data) { // 更新表格 DOM 元素 // ... } // 注意:这里的 AJAX 请求和 DOM 更新代码需要你根据实际情况来编写。 ``` 请根据你的具体需求,编写相应的 AJAX 请求来获取表格数据,并更新页面的表格 DOM 元素。记住在 AJAX 请求的成功回调调用 `updateTableContent` 函数来更新页面的表格。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值