Plan
-
Embed an HTML page in Vue:
- Use an
iframeto embed the external HTML page within a Vue component.
- Use an
-
Communicate between Vue and the embedded HTML page:
- Use
postMessageAPI for communication between the parent Vue component and the embedded HTML page.
- Use
Vue Component
- Create a Vue component that includes an
iframeto embed the external HTML page. - Set up event listeners to handle messages from the embedded HTML page.
- Use
postMessageto send messages to the embedded HTML page.
Embedded HTML Page
- Set up event listeners to handle messages from the parent Vue component.
- Use
postMessageto send messages to the parent Vue component.
Code
Vue Component (MyComponent.vue)
<template>
<div>
<iframe ref="iframe" src="path/to/embedded.html" @load="onIframeLoad"></iframe>
</div>
</template>
<script>
export default {
methods: {
onIframeLoad() {
const iframe = this.$refs.iframe.contentWindow;
// Listen for messages from the embedded HTML page
window.addEventListener('message', this.handleMessageFromIframe);
// Send a message to the embedded HTML page
iframe.postMessage({ type: 'INIT', data: 'Hello from Vue' }, '*');
},
handleMessageFromIframe(event) {
if (event.origin !== 'expected-origin') return; // Validate the origin
const { type, data } = event.data;
if (type === 'RESPONSE') {
console.log('Message from iframe:', data);
}
},
},
beforeDestroy() {
window.removeEventListener('message', this.handleMessageFromIframe);
},
};
</script>
Embedded HTML Page (embedded.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded Page</title>
</head>
<body>
<script>
// Listen for messages from the parent Vue component
window.addEventListener('message', function(event) {
if (event.origin !== 'expected-origin') return; // Validate the origin
const { type, data } = event.data;
if (type === 'INIT') {
console.log('Message from parent:', data);
// Send a response back to the parent Vue component
event.source.postMessage({ type: 'RESPONSE', data: 'Hello from embedded page' }, event.origin);
}
});
</script>
</body>
</html>
Summary
- Use an
iframeto embed the HTML page in the Vue component. - Use
postMessageAPI for communication between the parent Vue component and the embedded HTML page. - Ensure to validate the origin of messages for security.