Chrome中设置position:absolute时HTML Object的load事件多次触发求助

我之前也踩过Chrome浏览器下HTML Object元素的这个坑——在load回调里设置position: absolute会触发load事件反复执行，确实挺头疼的。结合我的实践经验，给你几个可行的解决方案：

方案1：延迟执行定位操作 #

把设置position的代码放到setTimeout里，让它在当前load事件的同步处理流程结束后再执行，这样就能避开浏览器因为同步修改样式而触发的Object重新加载：

const myObj = document.getElementById('your-object-element');
myObj.addEventListener('load', () => {
  // 用setTimeout把定位操作推迟到下一个事件循环
  setTimeout(() => {
    myObj.style.position = 'absolute';
    // 这里可以继续设置top、left等定位属性
  }, 0);
});

方案2：提前设置定位样式 #

如果你的场景允许，完全可以在Object加载之前就把绝对定位的样式加上，不用等到load事件触发再修改：

直接在HTML中设置： #

<object id="your-object-element" data="your-component-url" style="position: absolute;"></object>

或者在JS初始化时提前设置： #

const myObj = document.getElementById('your-object-element');
// 先设置定位，再绑定load事件
myObj.style.position = 'absolute';
myObj.addEventListener('load', () => {
  // 这里只处理加载完成后的其他逻辑，不用碰定位了
});

方案3：用标志位防止重复执行 #

如果必须在load回调里处理定位，可以加一个状态标志，确保定位代码只执行一次，即使load事件重复触发也不会循环执行：

const myObj = document.getElementById('your-object-element');
let hasProcessedLoad = false;

myObj.addEventListener('load', () => {
  if (hasProcessedLoad) return;
  hasProcessedLoad = true;

  myObj.style.position = 'absolute';
  // 其他定位相关操作
});

为什么会出现这个问题？ #

简单说，Chrome在Object的load事件同步回调中修改position这类会触发重排的样式时，会认为Object的布局环境发生了变化，需要重新加载其内容，进而再次触发load事件，形成了循环。上面的方案都是从打破这个同步循环的角度来解决的。

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