Android端Window 'load'事件不触发问题及解决方案咨询

问题描述 #

代码在其他设备运行正常，但Android设备上window.load事件的回调从未执行。使用的代码如下：

if(window.addEventListener){
    console.log('adding event listener!');
    // ^^^ this fires
    window.addEventListener('load', startVidTracker, false);
    // ^^^ this NEVER fires on Android
} else if(window.attachEvent){
    window.attachEvent('onload', startVidTracker);
} else {
    window.onload = startVidTracker;
}

测试环境为OnePlus 10 Pro，通过远程调试确认addEventListener的日志已打印，但startVidTracker未被调用。

可行解决方法 #

• 改用DOMContentLoaded事件：该事件在DOM结构解析完成后立即触发，无需等待图片、视频等所有资源加载完成，兼容性更稳定，Android设备上触发更可靠。代码示例：

  window.addEventListener('DOMContentLoaded', startVidTracker, false);
  

  若业务逻辑必须等待所有资源加载完成，再结合其他方式判断资源状态。

• 排查资源加载阻塞：Android浏览器可能因某类资源（如大体积视频、图片）加载超时或失败，导致window.load一直无法触发。通过远程调试的Network面板查看所有资源的加载状态，定位未完成或失败的请求并修复。

• 直接在脚本末尾调用函数：将脚本放在<body>标签的最后位置，此时DOM已构建完成，无需依赖事件监听，直接执行startVidTracker()即可，彻底规避事件兼容性问题。

• 检查事件监听是否被覆盖：排查其他脚本是否重写了window.onload，或调用window.removeEventListener移除了你的load事件监听。可在添加监听后打印window.onload内容，或通过调试器查看事件监听列表确认。

• 借助框架兼容方法（若已引入jQuery）：使用$(document).ready(startVidTracker);，jQuery内部已处理了不同浏览器（包括Android）的事件兼容性问题，能稳定触发回调。

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