1. 使用 iframe 嵌入本地 HTML 页面
在 public 文件夹下新建 static 文件夹，然后将 html 文件及相关引用拷贝到 static 文件夹下。
<template> <div class="wrap"> <iframe ref="iframe" :src="htmlSrc" width="100%" height="50%" frameborder="0"> </iframe> </div> </template> <script> export default { data() { return { htmlSrc:'static/test.html', // 注意: 直接写 static ,前面不需要加任何路径和字符。 }; }, }; </script> <style lang="scss" scoped> .wrap{ width: 100%; height: 500px; } </style>
2. 相互通信
vue 文件完整代码
<template> <div class="wrap"> <iframe ref="iframe" :src="htmlSrc" width="100%" height="50%" frameborder="0"> </iframe> <button @click="vueSendMsg">vue向iframe传递信息</button> <button @click="iframeMethods">触发iframe中的方法</button> </div> </template> <script> export default { data() { return { htmlSrc:'static/test.html', }; }, methods: { // vue获取iframe传递过来的信息 getiframeMsg(event){ const res = event.data; console.log(event) if(res.cmd == 'myIframe'){ console.log(res) } }, // vue向iframe传递信息 vueSendMsg(){ const iframeWindow = this.$refs.iframe.contentWindow; iframeWindow.postMessage({ cmd:'myVue', params : { info: 'Vue向iframe传递的消息', } },'*') }, // 触发iframe中的方法 iframeMethods(){ this.$refs.iframe.contentWindow.triggerByVue('通过Vue触发iframe中的方法'); }, }, mounted() { window.addEventListener('message',this.getiframeMsg) }, }; </script> <style lang="scss" scoped> .wrap{ width: 100%; height: 500px; } </style>
html 文件完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>iframe嵌入的页面</h3> <button onclick="iframeSendMsg()">iframe向Vue传消息</button> </body> <script type="text/javascript"> // iframe向vue传递信息 function iframeSendMsg(){ window.parent.postMessage({ cmd:'myIframe', params : { info: 'iframe向Vue传递的消息', } },'*'); }; // iframe获取Vue传递过来的信息 window.addEventListener("message", getVueMsg); function getVueMsg(event){ const res = event.data; if(res.cmd == 'myVue'){ console.log(res) } }; function triggerByVue(msg){ console.log(msg) } </script> </html>
- e.source – 消息源，消息的发送窗口 / iframe；
- e.origin – 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源；
- e.data – 发送过来的数据；
3. 拓展知识
关于 Window postMessage() 方法
定义和用法：
postMessage() 方法用于安全地实现跨源通信。
语法：
otherWindow.postMessage(message, targetOrigin, [transfer]);
关于 Window parent 属性
定义和用法：
parent属性返回当前窗口的父窗口。
语法：
window.parent
