zoukankan      html  css  js  c++  java
  • 解决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)
        }
      })
    } 
  • 相关阅读:
    LeetCode算法训练
    重新整理自己的博客
    VS2019制作安装包与ClickOnce部署
    2020年系统架构设计师考试通过总结
    合并两个有序数组为一个新的有序数组
    Inno Setup 出现 the drive or unc share you selected does not exist or is not accessible 解决记录
    60秒定位问题,十倍程序员的Debug日常
    这几个神秘参数,教你TDengine集群的正确使用方式
    存储成本仅为OpenTSDB的1/10,TDengine的最大杀手锏是什么?
    基于TDengine进行睿信物联网平台的迁移改造
  • 原文地址:https://www.cnblogs.com/kewenxin/p/9638721.html
Copyright © 2011-2022 走看看