iframe通信

weixin_45043158

已于 2024-07-12 18:22:07 修改

阅读量169

点赞数 8

文章标签： html5 javascript

于 2024-07-12 18:19:17 首次发布

本文链接：https://blog.csdn.net/weixin_45043158/article/details/140374591

版权

文章目录

前言
一、iframe是什么？
二、使用
三、通信

前言

微前端之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>