方式一：是將內容子頁面的html**通過vue v-html方式渲染到主頁面的div下；
方式二：通過在主頁面嵌入iframe頁面實現；
兩種方式都進行了驗證，並且都遇到問題：
方式一問題：可以渲染出子頁面html內容，但是丟失css樣式，引入ckeditor的標準樣式css後，絕大部分樣式問題解決，但通過標籤選擇器指定的樣式會受主頁面樣式的干擾，導致子頁面內容在瀏覽器上無法還原實際顯示效果；
方式二問題：iframe方式可以很輕易的載入出子頁面內容，但由於子頁面與主頁面之間跨域，所以主頁面無法獲取到iframe子頁面的document，從而無法獲取子頁面的實際高度，顯示效果無法達到預期。
經過比較果斷選取方式二來解決，那麼如何解決跨域獲取iframe子頁面高度，並實現iframe自適應子頁面高度的問題呢？
最終採用iframe子頁面通過postmessage方式解決問題，具體如下：
var ele_height = element.offsetheight;
console.log("size: " + ele_height);
if(this.framemode)
};top.postmessage(json.stringify(_resizemsgobj), '*');
window.addeventlistener('message', function(event)
}, false);
由於父頁面不知道子頁面的高度，先將iframe高度設定為0px，接收到子頁面訊息後再將iframe高度設定為實際高度，發現iframe載入需要較長時間，原因是子頁面onload事件是在整個頁面全部載入完成後才觸發，包括頁面所有js、css、檔案的載入，但載入需要較長時間，所以iframe載入時間過長，影響使用者體驗，但在載入完之前子頁面的高度又可能不準確，因此在父頁面在初始時給iframe設定乙個高於一屏的高度，可以較好的解決使用者體驗問題。
跨域iframe獲取高度
需求背景 父頁面內嵌乙個跨域的子頁面，但是子頁面的內容是未知的，意味著子頁面的高度也是未知的，父頁面的樣式不能定死高度，不然會出現雙重滾動條 子頁面有滾動條，父頁面也會出現滾動條 解決方案 公司裡大神出的方案，跨域的b.html頁面中再嵌入乙個 頁面agent.html，頁面跟最外層的父頁面a.ht...
跨域iframe高度計算
一 同域獲取iframe內容 這裡有兩個細節 1.取iframe內的文件物件，標準瀏覽器使用 contentdocument屬性，ie低版本 ie6,7,8 使用 document屬性。2.calcpageheight函式計算頁面的實際高度，標準瀏覽器使用document.documenteleme...
iframe巢狀跨域子頁面變化高度自適應
iframe巢狀子頁面 iframe width 100 height 100 id test title 測試 src frameborder 0 現在的高度是整個螢幕的高度，如果子頁面高度大於螢幕高度，內容無法顯示，並且沒有滾動條，要有滾動條必須給iframe賦值乙個確定的高度。但是又由於他是跨...