iframe嵌入页面传参数

### 使用 iframe 嵌入页面并传递参数

在 Vue 项目中，可以通过 URL 参数的方式向 `iframe` 中嵌入的页面传递数据。这种方式简单易行，并且兼容性良好。

#### 方法一：通过 URL 查询字符串传递参数

当创建 `iframe` 元素时，在其 `src` 属性后面附加查询字符串可以实现参数传递：

<template>
  <div id="app">
    <!-- 将要传递给子页面的数据作为查询参数 -->
    <iframe :src="'https://example.com/page?' + new URLSearchParams(params)" width="600" height="400"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: { key1: 'value1', key2: 'value2' } // 要传递的参数对象
    };
  }
};
</script>

这种方法适用于目标页面能够解析 URL 并从中提取所需信息的情况[^1]。

#### 方法二：利用 postMessage API 进行跨域通信

如果需要更复杂的交互方式，则可以考虑使用浏览器提供的 `postMessage()` 函数发送消息到 `iframe` 内部窗口。接收方可以在加载完成后监听来自父级的消息事件，并据此做出响应。

// 父页面 (Vue 组件)
mounted() {
  const messageData = JSON.stringify({ action: "init", payload: this.params });
  setTimeout(() => {
    document.querySelector('iframe').contentWindow.postMessage(messageData, '*');
  }, 100);
}

而在 `iframe` 的内部页面则需设置相应的监听器来处理收到的信息：

window.addEventListener('message', function(event) {
  try {
    let data = JSON.parse(event.data);

    switch(data.action){
      case "init":
        console.log("Received initialization parameters:", data.payload);
        break;
      default:
        throw Error(`Unknown action type ${data.action}`);
    }

  } catch(error){
    console.error("Error processing incoming message.", error.message);
  }
});

此方案允许更加灵活地定义双方之间的通讯协议，同时也支持双向交流以及异步回调机制[^3]。