最近在项目中有一个在浏览器中新开一个窗口的需求,如果不需要做任何的判断,只是直接新开窗口的话,用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) } }) }