Выключение внутри iframe для 1 элемента не работает - PullRequest
0 голосов
/ 31 января 2020

У меня есть код в Angularjs, После загрузки iframe я показываю всплывающее окно при наведении на элемент, который имеет определенный класс. Смотрите ниже прикрепленное изображение. enter image description here

Теперь я хочу закрыть это всплывающее окно в следующих двух случаях:

  1. Когда кто-то оставляет курсор из всплывающего окна наружу.
  2. Когда кто-то покидает курсор из подчеркнутого текста, с которым я связал событие hover.

Итак, я связал событие отпускания мыши на обеих вещах.

При отпускании мыши, я жду 1 секунду, так что если в течение 1 секунды, если курсор вернется к всплывающему окну, я отменю запланированную функцию closeEditAnnotationModal. (Чтобы отменить все таймауты, я поддерживаю массив его обещаний)

Это поведение работает нормально, если я ухожу из всплывающего окна или возвращаюсь во всплывающее окно. Но это не работает для подчеркнутого текста.

Ниже приведен пример кода для справки.

var hoveredElementAnnId, onPopupHoverEvent, onAnnTextHoverEvent, allTheScheduledEvents=[];

function cancelAllTheScheduledEvents() {
  if (allTheScheduledEvents.length !== 0) {
    allTheScheduledEvents.forEach(function(timeout) {
        $timeout.cancel(timeout);
      });                 
    allTheScheduledEvents = [];
  }
}

$('iframe').load(function () {
  loadedIframe = $(this);

  $(this).contents().find('.ann').hover(function() {
      // For every mouse in, there is mouse out event which is responsible to close the popup
      // But if we hover from 1 popup to another popup (Immediate switching between annoatation) than
      // we need to cancel/clear all the remaining timeouts which are closing the popup,
      // So we need to maintain the array of all the timeouts
      cancelAllTheScheduledEvents();
      var hoveredElement = $(this);

      hoveredElement.after(popoverTemplate); // This popoverTemplate is html template with div has id = #editAnnotationPopover

      loadedIframe.contents().find('#editAnnotationPopover').on('mouseleave', function() {
          onPopupHoverEvent = $timeout (function () {
              closeEditAnnotationModal();
            }, 1000);
          allTheScheduledEvents.push(onPopupHoverEvent);
        });

      loadedIframe.contents().find('#editAnnotationPopover').on('mouseover', function() {
          cancelAllTheScheduledEvents();
        });

    }, function() {
      onTextHoverEvent = $timeout(function () {
        closeEditAnnotationModal(); 
          }, 1000);
      allTheScheduledEvents.push(onAnnTextHoverEvent);
    });

});

Обновление: На странице refre sh мой приведенный выше код работает нормально, но если я выполняю какие-либо действия с iframe и перезагружаю iframe с использованием кода (var iframe = document.getElementById('vieweriframe'); iframe.src = iframe.src;), он перестает работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...