日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

H5 開發內嵌頁面跨域問題

作者:qq_45689385 更新時間: 2022-07-21 編程語言

問題

? ? ? ? 有一個內嵌外部網頁的需求,而頁面內嵌進來出現跨域,從而進行一系列嘗試

解決思路

? ? ? ? 由于是H5開發,當時內嵌用的是iframe,想起移動端有一個webview,webview的權限比iframe的高,就想著用webview嘗試一下,但是發現最終瀏覽器把webview還是解析成為了iframe,于是自己寫了一個demo,在原生環境下運行測試了一下webview,發現并未出現跨域問題,于是想著那我像app殼子那樣用plus動態創建一個webview呢,應該不會被解析成iframe了把,測試過后,發現成功解決

解決代碼邏輯

 mounted() {
        if (window.plus) { // 判斷是否又plus
            this.plusReady();
        } else {
            document.addEventListener('plusready', this.plusReady, false);
        }
    },
 methods: {
    plusReady() {
        this.ws = plus.webview.currentWebview(); // 動態創建一個當前窗口
        this.createWebview();
    },
    createWebview(){
         // 創建webview  this.src:地址 embed:id名稱
         let embed = plus.webview.create(this.src, 'embed', {
                top: '58px',
                bottom: '0px',
                position: 'dock'
           });
         this.embed = embed;
         // 添加到當前窗口
         this.ws.append(embed);
    }
 },
  // 組件銷毀時清除,解決返回后,webview窗口未銷毀返回導致遮擋原頁面的問題
  destroyed() {
        // 從webview實例中移出
        this.ws.remove(this.embed);
        // 清除
        this.embed.removeFromParent();
        this.embed.close();
    }

????????

原文鏈接:https://blog.csdn.net/qq_45689385/article/details/124177902

欄目分類
最近更新