解决window.open被拦截问题

时间 2019-12-17

标签解决 window.open window open 拦截问题栏目 Windows 繁體版

原文原文链接

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

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

在网上搜索了不少，但并无一个能够解决的。浏览器

因而，使用了form提交新开窗口的黑科技cookie

demo1app

<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的时候出现了一些问题）post

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

demo2url

// 开通成功后跳转新页面
*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)
    }
  })
}