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)
    }