Vue内嵌iframe及通讯

消息交互方式

父向子传递消息：iframeEl.contentWindow.postMessage
子接收父消息：window.addEventListener(‘message’)
子向父传递消息：window.parent.postMessage
父接收子消息：window.addEventListener(‘message’)

实例-html：

parent.html

	// 父向子发消息
    var sendMessage = function(msg) {
        // msg必须为string
        iframeEl.contentWindow.postMessage(msg, '*');
    };

	// 父接收子消息
    bindEvent(window, 'message', function (e) {
        results.innerHTML = e.data;
    });

child.html

	// 子接收父消息
    bindEvent(window, 'message', function (e) {
        results.innerHTML = e.data;
    });

	// 子向父传递消息
    var sendMessage = function (msg) {
        // msg必须为string
        window.parent.postMessage(msg, '*');
    };

实例-Vue：

parent.vue

<iframe style="width:100%;height:500px;" 
	src="http://localhost:8082/#/privilege?param0=123"  <!-- 父向子传参方式一 -->
	ref="iframe">
</iframe>
<div>从子页面传递的数据：{{childData}}</div>
<mtd-button @click="sendMessage">向iframe发送信息</mtd-button>
<script>
	sendMessage () { // 父向子传参方式二
        let iframeWin = this.$refs.iframe.contentWindow;
        iframeWin.postMessage({
            cmd: 'getFormJson',
            params: {}
        }, '*');
    }
    // 接受子页面发来的信息
    window.addEventListener("message", this.handleMessage);
    handleMessage (event) {
        var data = event.data;
        switch (data.cmd) {
            case 'returnFormJson':
                // 处理业务逻辑
                this.childData = data;
                break;
        }
    }
</script>

child.vue

<div>从父页面传递的数据：{{iframeData}}</div>
<mtd-button @click="handleMessageToParent">向父级发送消息</mtd-button>
<script>
  mounted () {
    // 接受父页面发来的信息
    window.addEventListener("message", this.handleMessage) // 子接收方式二参数
    this.iframeData = this.$route.query // 子接收方式一参数
  }
  handleMessageFromParent (event) { // 子接收父参数
    var data = event.data;
    switch (data.cmd) {
      case 'getFormJson':
        // 处理业务逻辑
        this.iframeData = data
        break
    }
  }
  handleMessageToParent () { // 子向父传参
	 window.parent.postMessage({
  		cmd: 'returnFormJson',
  		params: {}
    	}, '*');
  }
 <script> 

注意点

1. 如果您不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。 这是一个完全万无一失的方式来避免安全问题。
2. 如果您确实希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份。