WordPress wp_footer钩子中onload触发无限循环问题求助

核心问题 #

1. 两次尝试代码的错误：使用addEventListener时，你传递的是addOnLoad()（立即执行函数的结果），而非函数引用addOnLoad。这会导致函数在脚本加载时立刻执行，而非等待load事件触发。
2. 初始代码的无限循环：大概率是父页面接收postMessage后，调整了iframe高度，触发子页面重新加载/渲染，进而再次触发window.onload，形成循环。

正确代码实现 #

function addingListeners(){   
    ?>
    <script>
        console.log("in script");
        // 绑定load事件，传入函数引用，通过once: true确保只执行一次
        window.addEventListener('load', addOnLoad, {once: true});
        
        function addOnLoad() { 
            console.log("in load");
            parent.postMessage({height: document.body.scrollHeight}, '*');
        };
        
        window.onresize = function() { 
            console.log("in resize");
            parent.postMessage({height: document.body.scrollHeight}, '*');
        };
    </script>
<?php }
add_action("wp_footer", "addingListeners");

额外优化建议 #

• 不要用*作为postMessage的目标源，替换为父页面的具体域名，提升安全性：

  parent.postMessage({height: document.body.scrollHeight}, 'https://你的父页面域名.com');
  

• 如果父页面调整iframe高度导致子页面重新加载，可在父页面的message事件处理逻辑中，先判断新高度与当前iframe高度是否一致，再决定是否调整，避免不必要的重绘。

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