前言
微前端之iframe通信
一、iframe是什么?
可以嵌入html网页。
二、使用
属性 | 描述 |
---|---|
src | 指定要在 iframe 中显示的文档的 URL |
srcdoc | 在 iframe 中嵌入 HTML 代码而不是外部文档 |
name | 为 iframe 定义一个名称 |
allow | 允许特定功能的列表,如 fullscreen,geolocation 等 |
allowfullscreen | 指定是否允许在 iframe 中使用全屏模式 |
allowpaymentrequest | 指定是否允许在 iframe 中进行支付请求 |
allowtransparency | 指定 iframe 是否可以是透明的 |
class | 为 iframe 定义一个或多个类名 |
style | 定义 iframe 的 CSS 样式 |
frameborder | 指定是否在 iframe 周围显示边框 |
width | 指定 iframe 的宽度 |
height | 指定 iframe 的高度 |
importance | 指定 iframe 对页面内容的重要性 |
loading | 指定 iframe 加载时的行为 |
referrerpolicy | 指定如何发送 referer HTTP 标头 |
三、通信
1.父页面
<body>
<button id="button">父页面按钮</button>
<iframe border="0" frameborder="no" height="100%" id="iframe" name="iframe" scrolling="auto" width="100%" src="http://localhost:3000/#/home" class="ng-star-inserted"></iframe>
</body>
<script>
// 确保iframe完全加载
window.onload = function() {
let button = document.getElementById('button');
let iframe_dom = document.getElementById('iframe');
let iframe_window = iframe_dom.contentWindow; // iframe的window对象
let iframe_document = iframe_dom.contentDocument; // iframe的document对象
// 注册message事件,接收子页面消息
window.addEventListener('message', (e) => {
console.log('父message事件:', e.data)
})
// 发消息给子页面
function sendMessage() {
const message = '你好,我是父'; // 消息内容(可以为对象)
const targetOrigin = '*'; // 发送到哪(URL,'*'不限制)
iframe_window.postMessage(message, targetOrigin);
}
button.onclick = sendMessage;
};
</script>
2.子页面
<script>
// 注册message事件,接收父页面消息
window.addEventListener("message", function(e){
console.log('子message事件:', e.data)
});
// 发消息给父页面
function sendMessage() {
const message = '你好,我是父'; // 消息内容(可以为对象)
const targetOrigin = '*'; // 发送到哪(URL,'*'不限制)
window.parent.postMessage(message, targetOrigin);
}
sendMessage();
</script>