无父站点修改权限时如何接收iframe postMessage高度实现自动调整

实现方案 #

你无需修改iframe所属站点的任何代码，只需在你自己的页面（即嵌入iframe的父页面）添加message事件监听逻辑，即可捕获iframe主动发出的高度消息，实现高度自适应。

具体代码实现 #

将以下JavaScript代码添加到你的页面中即可生效：

// 监听iframe发送的postMessage消息
window.addEventListener('message', function(e) {
    // 安全校验：仅处理目标iframe域名发出的消息，避免恶意攻击
    const allowedIframeOrigin = 'https://koop.energie.check24.de';
    if (e.origin !== allowedIframeOrigin) return;

    const height = e.data;
    const targetIframe = document.getElementById('iframe_id');
    // 校验高度值格式合法性后设置iframe高度
    if (targetIframe && typeof height === 'number') {
        // 可根据实际情况增加2-5px冗余高度，避免内容溢出出现滚动条
        targetIframe.style.height = `${height}px`;
    }
});

优化建议 #

• 可以移除原有iframe标签上的height="400"固定高度属性，避免初始高度和自适应高度冲突。
• 安全校验逻辑建议保留，不要随意删除，防止第三方恶意页面伪造消息篡改你页面的元素属性。

内容的提问来源于stack exchange，提问作者Sinalco