Vue iframe 通信|极客教程

Vue iframe 通信

在前端开发中，我们经常会遇到需要在页面中嵌入另一个页面的情况，这时就需要用到iframe标签。而有时候，我们需要让iframe和父页面进行通信，例如传递数据、调用方法等。本文将详细介绍在Vue项目中如何实现iframe和父页面的通信。

1. 使用postMessage方法

postMessage是HTML5中新增的一个方法，用于在不同的文档之间安全地传递消息。在Vue项目中，我们可以利用这个方法实现iframe和父页面的通信。

在父页面中向iframe发送消息

首先，在父页面中，我们可以通过以下方式向iframe发送消息：

// 定义一个发送消息的方法
function sendMessageToIframe() {
    var iframe = document.getElementById('myIframe');
    iframe.contentWindow.postMessage('Hello from parent page!', '*');
}

// 监听来自iframe的消息
window.addEventListener('message', function(event) {
    console.log('Message received from iframe: ' + event.data);
});

上面的代码中，sendMessageToIframe方法用于向id为myIframe的iframe发送消息，而window.addEventListener用于监听来自iframe的消息。在Vue项目中，我们可以在需要的地方调用sendMessageToIframe方法，从而实现向iframe发送消息。

在iframe中向父页面发送消息

同样地，我们也可以在iframe中向父页面发送消息：

// 定义一个发送消息的方法
function sendMessageToParent() {
    window.parent.postMessage('Hello from iframe!', '*');
}

// 监听来自父页面的消息
window.addEventListener('message', function(event) {
    console.log('Message received from parent page: ' + event.data);
});

在这段代码中，sendMessageToParent方法用于向父页面发送消息，而window.addEventListener用于监听来自父页面的消息。通过这种方式，我们可以在iframe中与父页面进行双向通信。

2. 使用Vue插件实现通信

除了直接使用postMessage方法外，我们还可以通过封装Vue插件来实现iframe和父页面的通信。

创建一个Vue插件

首先，我们需要创建一个Vue插件，用于处理iframe和父页面的通信。下面是一个简单的插件示例：

// iframeCommunication.js

const iframeCommunication = {
    install(Vue) {
        Vue.prototype.sendMessageToIframe = function(message) {
            var iframe = document.getElementById('myIframe');
            iframe.contentWindow.postMessage(message, '*');
        }

        Vue.prototype.sendMessageToParent = function(message) {
            window.parent.postMessage(message, '*');
        }

        window.addEventListener('message', function(event) {
            Vue.prototype.$emit('messageReceived', event.data);
        });
    }
}

export default iframeCommunication;

在上面的代码中，我们定义了两个全局方法$sendMessageToIframe和$sendMessageToParent，用于向iframe和父页面发送消息。同时，我们通过$emit方法触发messageReceived事件，以在Vue实例中监听来自iframe和父页面的消息。

在Vue项目中使用插件

在Vue项目中，我们可以通过以下方式引入并使用我们创建的插件：

// main.js

import Vue from 'vue'
import App from './App.vue'
import iframeCommunication from './iframeCommunication'

Vue.use(iframeCommunication);

new Vue({
    el: '#app',
    render: h => h(App)
});

上面的代码中，我们先引入并安装了我们创建的插件iframeCommunication，然后将其应用到Vue实例中。接着，我们就可以在Vue组件中使用$sendMessageToIframe和$sendMessageToParent方法，实现iframe和父页面的通信。

3. 实际应用示例

下面我们将通过一个简单的实际应用示例来演示如何在Vue项目中实现iframe和父页面的通信。

父页面

// Parent.vue

<template>
    <div>
        <button @click="sendMessageToIframe">Send Message to Iframe</button>
        <p>Message from Iframe: {{ message }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: ''
        }
    },
    mounted() {
        this.on('messageReceived', message => {
            this.message = message;
        });
    },
    methods: {
        sendMessageToIframe() {
            this.sendMessageToIframe('Hello from parent page!');
        }
    }
}
</script>

iframe页面

// Iframe.vue

<template>
    <div>
        <p>Message from Parent: {{ message }}</p>
        <button @click="sendMessageToParent">Send Message to Parent</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: ''
        }
    },
    mounted() {
        this.on('messageReceived', message => {
            this.message = message;
        });
    },
    methods: {
        sendMessageToParent() {
            this.sendMessageToParent('Hello from iframe!');
        }
    }
}
</script>