如何通过发送消息修改iframe源？发送消息后src未更新问题求助

核心问题 #

你的iframe代码里未定义frameObj变量，导致尝试设置frameObj.src时找不到目标元素，自然无法更新iframe的源地址。此外，消息发送逻辑存在重复绑定和时机匹配问题。

修复步骤 #

1. 修正iframe内部的消息接收代码 #

先获取iframe元素的合法引用，替换未定义的frameObj：

<!--HTTPS only...-->
<style>
iframe {
    width: 100%;
    height: 100%;
    -webkit-transform:scale(0.735);
    -moz-transform-scale(.65);
    clip-path: inset(0% 0% 0% 0% round 10px 10px 2px 2px);
}
</style>
<div class="container">
    <div class="iframe-wrapper">
        <iframe id="targetIframe" src="https://www.test1.com/" frameborder="0"></iframe>
        <script>
        // 获取目标iframe元素
        const frameObj = document.getElementById('targetIframe');
        
        window.onmessage = function(event){
            // 建议验证消息来源，避免安全风险
            // if (event.origin !== '你的主站域名') return;
            
            console.log('收到消息:', event.data);
            // 校验消息为合法URL后再更新
            if (typeof event.data === 'string' && event.data.startsWith('http')) {
                frameObj.src = event.data;
            }
        };
        
        // 向主页面发送就绪通知，确保消息能被正确接收
        window.parent.postMessage({ type: 'ready' }, '*');
        </script>
    </div>
</div>

2. 优化主页面的消息发送逻辑 #

避免重复绑定onMessage事件，确保只在iframe就绪后发送地址：

export function button17_click(event) {
    const url = "https://www.test4.com/";
    console.log("触发postMessage");
    
    const htmlComp = $w("#html1");
    
    // 绑定就绪监听，仅在iframe准备好后发送地址
    htmlComp.onMessage((event) => {
        if (event.data.type === 'ready') {
            htmlComp.postMessage(url);
            // 解绑监听，防止多次点击重复触发
            htmlComp.onMessage(() => {});
        }
    });
    
    // 先发送一次消息，兼容iframe已就绪的情况
    htmlComp.postMessage(url);
}

关键说明 #

• 给iframe添加id属性，通过getElementById获取元素引用，这是解决src不更新的核心前提。
• 添加就绪通知逻辑，确保主页面能在iframe加载完成后发送地址，避免消息丢失。
• 增加URL格式校验和来源验证建议，提升代码安全性和稳定性。

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