子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

iframe 中父子页面交互之——子页面 ​

发送消息实测 ​

发送消息实测参考后续章节 父子页面交互 1-父页面-实战

在 Web 开发中，使用 iframe 嵌套页面是一种常见的技术手段。在父页面中通过 iframe 与嵌套的子页面进行通信，实现父子页面之间的交互。子页面向父容器发送消息的实现步骤如下：

子页面实现监听 ​

以下是使用步骤和示例

1. 域名加白处理 ​

配置域名加白：在容器开发中，需要提供各个环境的域名给容器开发者进行加白处理。如果没有加白，可能会收到 "消息来源地址不合法，请联系开发人员" 的提示信息。

约定的源名称：工作台源名称src为zc-fuzi-test，其他子项源名称请联系管理员生成。基本格式为zc-${type}-${name}。

2. 接入 Api 方式 ​

接入 API 方式：

  • 语法：postMessage({ fn, params, src }, url)
  • 解释：
    • fn：容器方法的名称。
    • params：容器方法的参数，需要先进行序列化，然后再进行编码。
    • src：约定的源名称。
    • url：容器的 URL 地址，默认有三个地址可选：

3. 示例 ​

3.1. 基础示例： ​

javascript
const _params = "https://zichin.com";
window.top.postMessage(
  {
    fn: "jump",
    params: encodeURIComponent(JSON.stringify(_params)),
    src: "zc-fuzi-test",
  },
  "*"
);

3.2. 双向交互示例 ​

javascript
const listerFunc = function ({ data }) {
  const params = JSON.parse(decodeURIComponent(data.params));
  console.log("收到消息", params);
};

const jump = () => {
  const _params = "https://zichin.com";
  window.top.postMessage(
    {
      fn: "jump",
      params: encodeURIComponent(JSON.stringify(_params)),
      src: "zc-fuzi-test",
    },
    "*"
  );
  window.removeEventListener("message", listerFunc);
  window.addEventListener("message", listerFunc);
};

综上，可以按照以下步骤来使用容器 API：

  1. 配置域名加白，确保域名合法。
  2. 使用正确的语法和参数调用 postMessage() 方法。
  3. 使用指定的 URL 地址作为消息的目标。