javascript - 设置样式位置 : absolute 时，Chrome 对象标签加载多次

Question

在加载 HTML 对象时，在通过正确的方法处理 Chrome 中的加载事件时遇到了一些麻烦。

我正在使用 HTML 对象将小部件加载到基于 Web 的仪表板中，加载事件在 Chrome 中看起来被破坏了，因为我重复触发了加载事件，但前提是我在加载的对象上设置了样式事件定位:绝对。不幸的是，对于我的应用程序来说，这是一个关键功能，因为我需要使用 javascript 将小部件放置在特定的屏幕位置。

下面的 fiddle 将使 Chrome 进入无限循环，而它在其他浏览器中只触发一次(尽管在我的应用程序中 Chrome 触发加载事件两次然后停止)。

HTML

<div id="container"></div>
<br/><br/><br/><br/>
<div id="xx">Not Fired..."</div>

JavaScript:

    var cnt = 0;
    (function loadWidget() {
        var widgetObj = document.createElement("object");
        widgetObj.data = ("http://13.75.145.9/widgets/dial.html")                                  // location of widget
        var tt = document.getElementById("container");
        tt.appendChild(widgetObj);
        widgetObj.addEventListener("load", widgetLoaded, false);
    })();

    function widgetLoaded(e) {
        cnt = cnt + 1;
        document.getElementById("xx").innerText = "fired x" + cnt;
    //any manipulation of style is OK, its only the position: absolute that causes re-firing
        e.currentTarget.style = "cursor: move; text-decoration: overline";
        e.currentTarget.style.setProperty("position", "relative");
    // Uncomment out the line below in Chrome and the event will continuously fire, but only once in othe browsers
        e.currentTarget.style = "position: absolute; left: 50px";
    }

Infinite loop

我假设这是一个 Chrome 错误，虽然我可以通过检查对象已加载的次数并提前退出加载事件来解决它，但会降低性能，因为它看起来整个对象都是每次都重新加载(重新运行对象中的全局 JavaScript)，并且在将几个小部件作为对象加载时，浏览器会显着降低速度，从而影响最终用户体验。

无论我尝试什么，我似乎都无法避免多次重新加载的发生。有没有其他人看到这个错误并且知道如何避免重新加载？

在相关说明中，Chrome 将呈现并显示对象，然后将其移动到正确的位置，这会闪烁屏幕，而其他浏览器将在其最终位置呈现小部件(在运行加载 javascript 之后)，这是一个更好的体验，我找不到停止 Chrome 渲染两次的方法。

[18 年 12 月更新] - 以下答案中概述的解决方法不再适用于最新版本的 Chrome (71.0.3578.80)，并且 Chrome 会双重加载 HTML 对象并双重触发加载的事件。有关详细信息，请参阅此 Chromium 错误帖子:Chrome bug with HTML Objects

Answer 1

不确定 Chrome 中出现此类行为的原因。但是，解决方法似乎是更改容器的样式而不是对象的样式 - see fiddle

function widgetLoaded(e) {        
    const target = e.currentTarget;        
    target.parentElement.style = "position: absolute; left: 50px;";
 }

同样经过一些调查，我发现问题可能是由于将 display 从 inline 更改为 block - see fiddle .