vue中iframe使用以及结合postMessage实现跨域通信

<iframe src="xxx.html"></iframe>

let ifr = document.getElementById('ifr')
const deviceHeight = document.documentElement.clientHeight;
ifr.style.height = (Number(deviceHeight)) + 'px'; 

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);    //获取iframe的window对象
console.log("document",idoc);    //获取iframe的document
console.log("html",idoc.documentElement);    //获取iframe的html
console.log("head",idoc.head);    //获取head
console.log("body",idoc.body);    //获取body

<iframe src ="xxx.html" id="ifr1" name="ifr1" scrolling="yes">
    <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr1'].window);
    console.dir(document.getElementById("ifr1").contentWindow);
</script>

//b.html是以iframe的形式嵌套在a.html中
//www.foo.com上的a.html
document.domain = 'foo.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.foo.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childnodes[0].nodeValue);
};
//script.foo.com上的b.html
document.domain = 'foo.com';

<iframe src="http://xxx.com" name="sendMessage"></iframe>

// 父页面js
let ifr = window.frames['sendMessage'];
// 向子页面发送message
ifr.postmessage('give u a message', "http://xxx.com");
// xxx.com页面js
// 监听父页面传来的信息
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://xxx.com') {
        if (e.data == 'give u a message') {
            e.source.postMessage('received', e.origin);  // 向原网页返回信息
        } else {
            alert(e.data);
        }
    }
}

<iframe :src="src" ref="iframe" frameborder="0"></iframe>

mounted() {
    this.iframeWin = this.$refs.iframe.contentWindow;
}

// 父页面监听子页面传来的信息
mounted() {
    window.addEventListener('message', this.handleMessage);
    this.iframeWin = this.$refs.iframe.contentWindow;
},
methods: {
    handleMessage (event) {
        const data = event.data.data
        if(data.info === "success"){
            alert(data.data)
        }
    }
}

sendMessage() {
    // 向父页面发送信息
    window.parent.postMessage({
        data: {
            info:"success",
            data:"我是子页面的test！"
        }
    }, '*');
}

sendMessage () {
    // 向子页面传数据,需要注意这里没有parent
    this.iframeWin.postMessage({
        info: 'success',
        data: "我是来自父页面的data!"
    }, '*')
}