设置样式位置时，镀铬对象标签多次加载:绝对

Question

在加载html对象时，通过正确的方法来处理镀铬事件的正确方法遇到一些麻烦。

我正在使用HTML对象将小部件加载到基于Web的仪表板中，并且加载事件看起来在Chrome中被损坏，因为我会重复启动加载事件位置的事件：绝对。不幸的是，对于我的应用程序，这是一个关键功能，因为我需要使用JavaScript将小部件放置在特定的屏幕位置。

下面的小提琴将在其他浏览器中仅发射一次镀铬循环中的铬

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";
    }

无限循环

我假设这是一个镀铬错误，尽管我可以通过检查对象已加载多少次并尽早退出加载事件，但由于整个对象是每次重新加载(对象中的全局JavaScript是重新运行的(，当对象加载几个小部件时，浏览器会显着减慢影响最终用户体验的影响。

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

在相关说明中，Chrome将渲染并显示对象，然后将其移至正确的位置，该位置会忽略屏幕，而其他浏览器将在其最终位置(运行JavaScript运行后(渲染小部件，这是一个更好的体验，我找不到一种停止Chrome渲染两次的方法。

[更新'18] - 以下答案中概述的解决方法不再与最新版本的Chrome(71.0.3578.80(一起使用，Chrome是双重加载HTML对象并双重启动已加载的事件。有关更多信息，请参见此Chromium Bug帖子：带有HTML对象的Chrome Bug

Answer 1

不确定在chrome中这种行为的原因。但是，解决方法似乎是一种不断变化的容器的样式，而不是对象的样式 - 请参阅小提琴

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

也经过一些调查后，我发现这个问题可能是由于display从inline更改为block引起的 - 请参见小提琴。