设置样式位置时,Chrome对象标签会多次加载:绝对

Question

在加载HTML对象时,在排序Chrome中处理加载事件的正确方法时遇到一些麻烦.

我使用HTML对象控件加载到一个基于Web的仪表板和负载事件看起来Chrome浏览器被打破,因为我得到的负载事件的重复发射,但只有当我在负载情况下设置的样式的对象定位:绝对.不幸的是,对于我的应用程序,这是一个关键功能,因为我需要使用javascript将小部件放置在特定的屏幕位置.

下面的小提琴将使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";
    }

无限循环

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

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

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

[更新十二月'18] -在下面用铬(71.0.3578.80)和Chrome浏览器的最新版本不再起作用的答案列出的解决方法是双装载HTML对象和二次烧成加载的事件.有关详细信息,请参阅此Chromium bug帖子:Chrome对象的Chrome错误

Answer 1

不确定Chrome中此类行为的原因.然而,一个变通方法似乎是一个改变容器的风格而不是对象的风格 - 请参阅小提琴

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

也经过一番调查,我发现可能改变引起的问题display来自inline于block- 看到小提琴.