在vue中使用ifream需要注意的地方

近期，公司乙個原生應用要做h5版本的，因為涉及到很多webview頁面，這些webview頁面包括：h5的協議頁面、第三方保險的授權頁面、其他授權頁面。這些授權都是第三方公司給的頁面，授權成功有後端來非同步爬取第三方公司的授權結果。

經過調研發現，現階段用h5來包外部頁面的方式大概有兩種：

1、用ajax get獲取到頁面內容，填充到頁面裡面，但這種有個弊端，就是必須純靜態的頁面，也就是不能包含外部的js,css，這種的話會引起跨域問題，其實如果做的話也可以，做**，然後獲取到了，替換之前的ip或網域名稱，因為比較麻煩，這種方式就被我pass掉了。

2、用ifream，這種方式是我第一反應考慮到的方式，因為不會有跨域問題，所以我就採用了這種方式

下面，說一說我用的ifream的好處和壞處：

好處：沒有跨域問題，可以直接用，src路徑直接引入就行了.並且ifream可以直接通過this.parent來呼叫父頁面的方法，dom元素可控，沒用的元素可以直接刪除

壞處：必須用ifream.contentwindow下的方法來獲取資料，並且ifream.contentwindow執行方法時還是會有跨域問題，但這個跨域問題，只需要配置外層頁面的**就可以了，dom元素不可控

最終用了ifream，我來說一下裡面需要注意的幾個點:

1、用onload來判斷ifream是否載入完，為什麼要判斷？因為是嵌入乙個頁面，如果沒有載入完的話你需要給使用者提示載入中的等待動畫。

2、父頁面呼叫子元件的方法：必須同源，否則會提示你同源策略不允許跨域

document.getelementbyid('id').fream.contentwindow.方法名

用try catch判斷是否同源；

try
document.getelementbyid('id').fream.contentwindow.方法名();
}catch(err)

3、ifream呼叫父頁面的方法：

父頁面必須定義全域性的方法：

window.方法名=function(){}

ifream呼叫時直接window.parent.方法名()

4、因為vue中定義的全域性方法都是非同步的，所以需要在入口重定義this：

let self =this;
window.h5hiddenhud =function() ;

總結：在頁面巢狀頁面實際上我感覺不是什麼優雅的做法，這種情況下，最好能讓提供介面，自己寫頁面，實在不得以再用這種方法。