vue 内嵌外部页面

参考：https://blog.csdn.net/weixin_43957384/article/details/131111544

Plan

Embed an HTML page in Vue:
- Use an iframe to embed the external HTML page within a Vue component.
Communicate between Vue and the embedded HTML page:
- Use postMessage API for communication between the parent Vue component and the embedded HTML page.

Vue Component

Create a Vue component that includes an iframe to embed the external HTML page.
Set up event listeners to handle messages from the embedded HTML page.
Use postMessage to send messages to the embedded HTML page.

Embedded HTML Page

Set up event listeners to handle messages from the parent Vue component.
Use postMessage to 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 iframe to embed the HTML page in the Vue component.
Use postMessage API for communication between the parent Vue component and the embedded HTML page.
Ensure to validate the origin of messages for security.

posted on 2024-08-21 13:55 朝朝暮Mu 阅读(48) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue 项目学习笔记

· Vue项目笔记01

· vue与iframe页面通讯

· html页面引入vue组件

· vue项目的使用，前后端（vue）实现登录，混入mixin（多个组件都要使用的配置放在一起），插件（用于增强Vue，有很多第三方插件），Elementui的使用（样式）

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人

朝朝暮暮

vue 内嵌外部页面

Plan

Vue Component

Embedded HTML Page

Code

Vue Component (`MyComponent.vue`)

Embedded HTML Page (`embedded.html`)

Summary

导航

公告

统计

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<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>

	<!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>

朝朝暮暮

vue 内嵌外部页面

Plan

Vue Component

Embedded HTML Page

Code

Vue Component (MyComponent.vue)

Embedded HTML Page (embedded.html)

Summary

导航

公告

统计

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

Vue Component (`MyComponent.vue`)

Embedded HTML Page (`embedded.html`)