当前位置：首页 > VUE

vue实现iframe发送请求

2026-01-22 05:34:22VUE

在 Vue 中实现 iframe 发送请求

使用 `postMessage` 进行跨窗口通信

父窗口通过 postMessage 向 iframe 发送数据，iframe 通过监听 message 事件接收数据并处理请求。

父组件代码示例

<template>
  <iframe ref="iframeRef" src="iframe-page.html"></iframe>
  <button @click="sendRequest">发送请求</button>
</template>

<script>
export default {
  methods: {
    sendRequest() {
      const iframe = this.$refs.iframeRef.contentWindow;
      iframe.postMessage(
        { type: 'FETCH_DATA', payload: { url: '/api/data' } },
        '*' // 目标 origin，建议替换为具体域名
      );
    }
  }
};
</script>

iframe 页面代码示例

window.addEventListener('message', (event) => {
  if (event.data.type === 'FETCH_DATA') {
    fetch(event.data.payload.url)
      .then(response => response.json())
      .then(data => {
        // 将结果传回父窗口
        window.parent.postMessage(
          { type: 'RESPONSE', payload: data },
          '*' // 父窗口 origin
        );
      });
  }
});

通过 `window.parent` 反向通信

iframe 内可直接调用父窗口方法或触发事件。

iframe 内代码示例

// 直接调用父窗口方法
window.parent.doSomethingInParent();

// 或触发自定义事件
window.parent.dispatchEvent(new CustomEvent('iframe-request', {
  detail: { url: '/api/data' }
}));

动态修改 iframe 的 `src` 属性

通过 URL 参数传递请求信息，iframe 加载时解析参数并处理。

Vue 组件示例

vue实现iframe发送请求

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

<script>
export default {
  data() {
    return {
      requestParams: { id: 123 }
    };
  },
  computed: {
    iframeUrl() {
      return `iframe-page.html?${new URLSearchParams(this.requestParams)}`;
    }
  }
};
</script>