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实例 访问子页面