|
我们使用React时经常当作spa使用，页面之间的传值可以通过react-router或sessionStorage，但是总会存在一两个比较特殊的需求。
其中跨页面传值就是比较常见的需求了，接下来我们来浅谈一下iframe的传值过程。
iframe是前端WEB端常用的页面镶嵌标签，可以实现嵌入其他页面当如子元素使用。APP端和小程序端有类似的标签webview，使用起来类似。
父页面向iframe传值：
iframe存在一个src属性，类似于图片的src，支持传入某个网站的地址，可携带参数。父页面向iframe传值基于src链接拼接的参数实现。
<iframe
allowFullScreen={true}
scrolling={'no'}
src="https://www.baidu.com/s?wd=iframe"
/>
iframe向父页面传值
如果页面被当作iframe嵌入的时候，可以使用window.parent.postMessage进行发消息，父页面监听来自子页面的message，然后在回调中处理业务。
iframe页面：
window.parent && window.parent.postMessage({ type: 'unfull' }, '*');
父页面：
window.addEventListener('message', this.handleIframePostMessage)
function handleIframePostMessage(event)
{
if (event.origin !== "http://example.org:8080")
return;
}
页面中监听message是很不安全的，如果必要的情况下使用，请指定origin为自己的默认允许的域名。 | 
转播
