При установке позиции стиля теги Chrome Object загружаются несколько раз

Question

Возникли проблемы с сортировкой правильного подхода к обработке события загрузки в Chrome при загрузке HTML-объектов.

Я использую HTML-объекты для загрузки виджетов в веб-панель управления, и событие загрузки в 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 дважды.

Answer 1

Не уверен насчет причин такого поведения в Chrome. Тем не менее, обходной путь кажется изменяющим стиль контейнера вместо стиля объекта - см. Fiddle

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

Также после некоторого расследования я обнаружил, что проблема, вероятно, вызвана изменением display от inline в block - Посмотри на скрипку.