ajax弹窗被拦截的几种解决方法

概述

有很多时候需要先调用ajax，ajax成功后弹出窗体。目前浏览器大多默认拦截弹窗，如果是用户操作（比如点击按钮）触发的弹框，浏览器不会拦截，但是不是用户触发的会拦截（一切都是为了用户体验）。

比较明显的是safari浏览器，点击按钮，先调用ajax，在ajax完成后，弹窗会被拦截。

 

解决方法

方法一：ajax改成同步

缺点：会堵塞ui，比如ajax调之前，显示loading，loading是显示不出来的

 

方法二：ajax调用前先弹窗（空地址），ajax之后，修改弹窗地址

缺点：ajax未返回前，窗口也存在。应用场景不广，比如ajax返回后需要调用第三方的方法，第三方方法中会弹窗，这个就没法处理。

 

方法三：设定1个定时器，在ajax的返回后，在定时器中弹窗

缺点：需要自行控制逻辑，容易漏场景

 

样例代码

var url = 'https://test.com'; //需要换成你的ajax
    var timeout = 3000;

    function getRequestData() {
      var request = { 'head': {} }
      return JSON.stringify(request)
    }

    $('#btn').click(function () {
      fun2();
    })

    //ajax同步
    function fun1() {
      $.support.cors = true;
      $('#loading').show()
      $.ajax({
        url: url,
        timeout: timeout,
        type: 'post',
        dataType: 'json',
        data: getRequestData(),
        cache: false,
        async: false,
        success: function (response, requestData) {
          //成功
          console.log('success')
          $('#loading').hide()
          window.open('https://www.baidu.com', 'newwindow', 'height=100, width=400, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
        },
        error: function (xhr, status, err, requestData) {
          //成功
          console.log('error')
          $('#loading').hide()
        }
      });
    }

    //先打开窗口，ajax返回后修改窗口
    function fun2() {
      $.support.cors = true;
      $('#loading').show()

      var winHd = window.open('', 'newwindow', 'height=100, width=400, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

      $.ajax({
        url: url,
        timeout: timeout,
        type: 'post',
        dataType: 'json',
        data: getRequestData(),
        cache: false,
        async: true,
        success: function (response, requestData) {
          //成功
          console.log('success')
          $('#loading').hide()
          winHd.location = 'https://www.baidu.com'
        },
        error: function (xhr, status, err, requestData) {
          //成功
          console.log('error')
          $('#loading').hide()
          //关闭窗口
          winHd.close()
        }
      });
    }

    //定时器轮询
    function fun3() {
      $.support.cors = true;

      $('#loading').show()

      var ajaxRet = null
      $.ajax({
        url: url,
        timeout: timeout,
        type: 'post',
        dataType: 'json',
        data: getRequestData(),
        cache: false,
        async: true,
        success: function (response, requestData) {
          //成功
          console.log('success')
          $('#loading').hide()

          ajaxRet = {
            'code': 'success'
          }
        },
        error: function (xhr, status, err, requestData) {
          //成功
          console.log('error')
          $('#loading').hide()

          ajaxRet = {
            'code': 'error'
          }
        }
      });

      //
      var inter = setInterval(function () {
        if (ajaxRet) {
          if (ajaxRet.code === 'success') {
            window.open('https://www.baidu.com', 'newwindow', 'height=100, width=400, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
          } else {
            console.log('not success')
          }
          clearInterval(inter);
        }

      }, 100)
    }