ifream 父子页面传值

我们一般提供给别人使用我们代码有3种，js库、npm包、ifream页面。

1. js库：一般不带ui或者简单ui，封装复杂js处理能力。网页中一般挂载到 window 对象上使用，node例外没有window对象，例如 jquery 等。
2. npm包：一种是js库的峰值，一种是带ui的业务组件。
3. ifream页面：一般是带了复杂功能的页面，用于打包架构不一致，npm包无法引用情况使用。

ifream

postMessage 方法可以安全地实现两个网页之间的跨源通信。

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

使用postMessage一定要知道对方的句柄，以上就是说： 一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

子页面 -> 父页面发送消息

父子页面是不同页面，子页面以ifream方式嵌套在父页面中。

// 子页面发送，子页面中的代码
window.parent.postMessage(message, targetOrigin)

// 父页面接收，父页面中的代码
window.addEventLister("message", (event) => {})

父页面 -> 子页面发送消息

// 父页面发送，父页面中的代码
const ifream = document.getElementById('ifream');
ifream.contentWindow.postMessage(messageBody, targetOrigin);

// 子页面接收，子页面中的代码
window.addEventLister("message", (event) => {})

ifream 案例

ifream适合两个页面互相独立的，如果两个页面直接交互复杂则不适合。例如：一个视频上传页面中嵌入了视频编辑器，两个相对独立，只要把视频地址从父页面传入到子页面就可以，则比较合适。

const messageId = `UUID-${+new Date()}`; // 用来判定是在本次的处理
//  点击完成
const targetOrigin = "*"

//messageBody 的设计
const messageBody = {
  messageId: "", 
  eventName: "", // 用来判定是什么操作
  data: {}
}

window.parent.postMessage(messageBody, targetOrigin)