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

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

0 голосов
/ 25 апреля 2018

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

[Обновление от декабря '18] - обходной путь, описанный в ответах ниже, больше не работает с последней версией Chrome (71.0.3578.80), а Chrome выполняет двойную загрузку объектов HTML и двойную загрузку загруженных событий. См. Этот пост об ошибке Chromium для получения дополнительной информации: Ошибка Chrome с объектами HTML

1 Ответ

0 голосов
/ 27 апреля 2018

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

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

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

...