iframe内联框架传参

iframe内联框架传参

因为项目中需要嵌套进来一些页面，就考虑了使用iframe内联框架来进行页面跳转，在跳转过程使用postMessage传递一些参数给子页面，因为这方面知识平时用的比较少。导致走了一些弯路，因此，记录一下防止以后再犯出现问题。

postMessage基础知识

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

语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message
需要传递的信息
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串""（表示无限制）或者一个URI。不建议使用“”，因为可能导致数据泄露等安全问题，应该写上需要传递的目标窗口的url地址。

这样，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送。

transfer （可选）
是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

postMessage方法被调用时，会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息，该MessageEvent消息有四个属性需要注意：

• type：表示该message的类型
• data：为 postMessage 的第一个参数
• origin：表示调用postMessage方法窗口的源
• source：记录调用postMessage方法的窗口对象

项目中的应用

父页面引入iframe

<template>   
     <