解决window.open被拦截问题

最近在项目中有一个在浏览器中新开一个窗口的需求，如果不需要做任何的判断，只是直接新开窗口的话，用a标签即可。

但是如果需要做一些判断再新开一个窗口的话，就不能使用a标签了。window.open确实可以打开一个新窗口，但会被浏览器当作广告被拦截，需要手动去解除拦截。

在网上搜索了很多，但并没有一个可以解决的。

于是，使用了form提交新开窗口的黑科技

demo1

<html>

<body>

  <form name="xxxForm" action="/example/html/form_action.asp" method="get" target="_blank">

    <input type="hidden" name="fname" value="1" />

    <br />

    <input type="hidden" name="lname" value="2" />

    <br />

    <input id="sub" type="submit" value="Submit" style="display: none;" />

    <input id="ck" type="button" value="提交">

  </form>

  <script>

    document.getElementById('ck').onclick = function (e) {

      document.getElementById('sub').click();

      // this.refs.xxxform.submit();  如果点击模拟不行用这个

    }

  </script>

</body>

</html>

action 是你需要跳转的页面，method用get（我自己在用post的时候出现了一些问题）

只要页面加载时提前查好数据，直接提交form表单就可以。去掉ajax就可以。原则就是form的默认submit触发前不能setTimeout或者ajax

demo2

// 开通成功后跳转新页面

*open2({ payload }, { call, put, select }) {

  let tmpState = yield select(state => state[tmpModule.namespace]);

  try {

    yield put({

      type: 'open',

      payload: {}

    })

    // 打开新的窗口

    yield openNewWin()

  } catch (err) {

    console.error(err)

  }

}

// 打开新页面

const openNewWin = () => {

  return new Promise((resolve, reject) => {

    if (!isEmpty(Cookie.get('trunTenantId'))) {

      var str = [];

      let url = `${Config.jumpUrl}?auth=${Cookie.get(Config.cookie.auth)}&tenantId=${Cookie.get('trunTenantId')}`

      // let url = `http://localhost:8009/#/home/operationMonitoring/operateScreen?auth=${Cookie.get(Config.cookie.auth)}&tenantId=${Cookie.get('trunTenantId')}`

      str.push(`<form action=${url} id="gobank" method="get">`);

      str.push('</form>');

      $("body").append(str.join(''));

      $("#gobank").attr('target', '_blank');

      $("#gobank").submit();

      console.log('open win ok');

      resolve(1)

    } else {

      reject(0)

    }

  })

}

秒客网

解决window.open被拦截问题

相关文章