如何在WordPress页面内容完全加载完成后执行脚本

你当前的代码将DOM元素获取逻辑放在了window.onload回调外部，脚本加载时就会立即执行document.getElementById("matched")，此时页面DOM还未完成渲染，拿到的结果直接是null，后续window.onload触发后判断的还是之前存储的null值，自然会提示找不到元素。

以下是几种适用的实现方式，可按需选择：

• 方案1：调整元素获取逻辑的位置，直接放在window.onload回调内部
  修改后代码如下：

<script type="text/javascript">
window.onload = function afterWebPageLoad() { 
    var question =  document.getElementById("matched");
    if(question){
        console.log("id 'matched' exists");
    } else {
        console.log("id 'matched' not found");
    }
}
</script>

• 方案2：使用DOMContentLoaded事件（更推荐）
  该事件在DOM树渲染完成后就会触发，不需要等图片、样式等静态资源全部加载完毕，执行时机更早，更符合检测页面元素的需求：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var question =  document.getElementById("matched");
    if(question){
        console.log("id 'matched' exists");
    } else {
        console.log("id 'matched' not found");
    }
});
</script>

• 方案3：WordPress场景下给脚本添加defer属性
  不需要修改JS逻辑，只需给script标签添加defer属性，即可让脚本在DOM解析完成后自动执行：

<script type="text/javascript" defer>
var question =  document.getElementById("matched");
if(question){
    console.log("id 'matched' exists");
} else {
    console.log("id 'matched' not found");
}
</script>

如果是通过WordPress官方的wp_enqueue_script函数入队的脚本，也可以通过script_loader_tag过滤器批量给指定脚本添加defer属性。

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