iframe 与 h5 或 其他vue页面传值，详解传递参数的方法和技巧

在Vue中，iframe与父页面（H5或其他Vue页面）传值可以通过几种方式实现：

1. 通过window.postMessage方法

   window.postMessage是一个安全的跨文档消息传送API，可以实现跨文档、多窗口通信。

   父页面发送消息给iframe：

   
   
   
   const iframeWindow = this.$refs.myIframe.contentWindow;
   iframeWindow.postMessage({ msg: 'Hello, I am from parent' }, '*');

   iframe内接收消息：

   
   
   
   window.addEventListener('message', (event) => {
     if (event.origin !== window.location.origin) return;
     console.log(event.data.msg); // 输出：Hello, I am from parent
   });

2. 通过window.parent属性

   在iframe内部可以通过window.parent访问父页面的window对象，并可以访问父页面定义的全局变量或函数。

   父页面定义全局函数：

   
   
   
   window.receiveMessageFromIframe = function(msg) {
     console.log(msg); // 输出：Hello, I am from iframe
   };

   iframe内调用父页面函数：

   
   
   
   window.parent.receiveMessageFromIframe('Hello, I am from iframe');

3. 通过URL参数

   如果要传递的数据量不大，可以通过修改iframe的src属性来传递参数。

   父页面设置iframe的src：

   
   
   
   <iframe :src="iframeUrl"></iframe>

   
   
   
   data() {
     return {
       iframeUrl: 'http://example.com/iframe.html?param=value'
     };
   }

   iframe内部通过URLSearchParams或正则匹配获取参数：

   
   
   
   const params = new URLSearchParams(window.location.search);
   const paramValue = params.get('param'); // 输出：value

以上方法可以实现iframe与父页面的通信，但请注意安全性，例如防止跨站点脚本攻击（XSS）。