Vue子域名应用中如何实现iframe向父页面传递数据并触发父方法

问题原因 #

你的调用失败主要有两个核心原因：

1. Vue实例内定义的方法默认仅挂载在Vue实例对象上，不会直接暴露到父页面的全局window对象中，iframe通过window.parent自然无法访问到该方法
2. 你的Vue应用部署在子域名、表单在主站，二者存在跨域限制，未做跨域兼容的情况下无法直接访问对方页面的全局对象

解决方案1：跨域兼容+挂载全局方法（仅适用于同主域名场景） #

如果你的Vue应用和主站表单属于同一个主域名下的不同子域名，可使用该方案：

1. 配置同域标识：父页面（Vue应用）和iframe内的表单页面，都添加如下代码指定共同主域名：

// 替换为你实际的主域名，比如主站是example.com、子站是app.example.com就填example.com
document.domain = 'example.com';

2. 把Vue方法暴露到全局window：在Vue组件的生命周期钩子中挂载/销毁方法：

export default {
  // 其他配置省略
  mounted() {
    // 将Vue实例方法挂载到全局window，供iframe访问
    window.displaySuccess = this.displaySuccess;
  },
  beforeUnmount() {
    // 组件销毁时清理全局挂载的方法，避免内存泄漏和全局污染
    delete window.displaySuccess;
  },
  methods: {
    displaySuccess(data){
      console.log("data from server: "+data);
    }
  }
}

3. 保持iframe内的调用代码不变即可：

window.parent.displaySuccess(text);

解决方案2：postMessage通信（通用、更安全，推荐） #

如果两个站点域名差异较大，或者想要更高的安全性，优先使用postMessage跨文档通信方案，无需修改domain配置：

1. Vue父页面监听消息事件：

export default {
  // 其他配置省略
  mounted() {
    // 监听iframe发来的消息
    window.addEventListener('message', this.handleIframeMessage);
  },
  beforeUnmount() {
    // 组件销毁时移除监听
    window.removeEventListener('message', this.handleIframeMessage);
  },
  methods: {
    handleIframeMessage(event) {
      // 安全校验：只接受来自你的表单主站的消息，替换为你实际的表单域名
      if (event.origin !== 'https://你的主站域名.com') return;
      // 消息类型校验，避免和其他业务消息冲突
      if (event.data?.type === 'formSubmitSuccess') {
        this.displaySuccess(event.data.payload);
      }
    },
    displaySuccess(data){
      console.log("data from server: "+data);
    }
  }
}

2. iframe内发送消息：替换原来的直接调用代码为postMessage逻辑：

// 第二个参数替换为你Vue应用的实际域名，不要填*避免安全风险
window.parent.postMessage({
  type: 'formSubmitSuccess',
  payload: text // 要传递给父页面的数据
}, 'https://你的Vue子域名.com');

注意事项 #

• 使用postMessage时必须校验event.origin，防止恶意站点伪造消息调用你的业务逻辑
• 全局挂载方法时必须在组件销毁时清理，避免全局对象被污染

内容的提问来源于stack exchange，提问作者Emzyn pvt ltd