vue解决打开新窗口被拦截的的实战方法
生活随笔
收集整理的這篇文章主要介紹了
vue解决打开新窗口被拦截的的实战方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
解決方案:
1. 使用a標簽替代
給出如下函數,將此函數綁定到click的事件回調中,就可以避免大部分瀏覽器對窗口彈出的攔截。
newLink(url) {let a = document.createElement(‘a‘);a.setAttribute(‘href‘, url);a.setAttribute(‘target‘, ‘_blank‘);}2. 使用form的submit方法打開一個頁面
這種方法需要構造一個from,然后由js代碼觸發form的submit,將表單提交到一個新的頁面,
如果需要傳遞參數時,需要使用 POST 方法, 默認的 GET 方法無法傳遞參數。也就是新頁面的url中沒有參數部分。如:
newLink(url){let form = document.createElement('form');form.action = 'www.baidu.com?id=1';form.target = '_blank';form.method = 'POST';document.body.appendChild(form);form.submit(); }3、終極解決方案–先彈出窗口,然后重定向
第三種方案,其實是一種變通方案,核心思想是:先通過用戶點擊打開頁面,然后再對頁面進行重定向。示例代碼如下:
newLink(url){// 打開頁面,此處最好使用提示頁面let newLink = window.open(‘loading page‘);axios.get(url).then(function (response) {newLink.location.href = url;;}).catch(function (error) {console.log(error);}) }參考鏈接1
參考鏈接2
總結
以上是生活随笔為你收集整理的vue解决打开新窗口被拦截的的实战方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: error the @annotatio
- 下一篇: 一坐感受神奇!迪士尼打造魔术台