iframe 父子頁面調用vue函數，並解決跨域問題，寬度自適應

第一：

1. 父頁面 html

 <iframe id="external-frame" name="external-frame" ref="iframeDom" marginwidth=0 marginheight=0 width="100%" height="100%" src="./document.html" onload="setIframeHeight(this)" frameborder="0" scrolling="auto"></iframe>
 <!--- onload="setIframeHeight(this)"  添加一個事件，獲取子頁面的寬度 --->

 

2. 父頁面 script

 function setIframeHeight(iframe) {
            if (iframe) {
                var iframeWin = iframe.contentWindow ||         iframe.contentDocument.parentWindow;
                // console.log(iframeWin, 'iframeWin')
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
            }
};

        window.onload = function() {
            setIframeHeight(document.getElementById('external-frame'));
        };    
// 用於獲取子頁面的寬度    

這樣就可以設置子頁面的寬度了，但是如果在本地的話會產生跨域問題，這個時候就可以搭配   ---->  http-server  <----  點擊可以查看怎么啟動本地服務

啟動好本地服務，就可以解決跨域問題了

 

3. 子頁面向父頁面傳值 

window.parent.vm
// 通過 window.parent ，來訪問父頁面的值 vm是vue new的實例，可以實現 window.parent.vm.函數名稱 

 

 

4. 父頁面向子頁面傳值 

window.frames["external-frame"].vm
// window.frames["iframe的nane名稱"].vue實例 訪問子頁面