Найти окружающий элемент исходного iframe в addEventListener

#javascript #html #iframe #sandbox

#javascript #HTML #iframe #песочница

Вопрос:

У меня есть страница оболочки, которая содержит несколько изолированных iframes.

например

 <div>
  <div id="sb1"><iframe sandbox="allow-scripts" srcdoc="stuff here"/></div>
  <div id="sb2"><iframe sandbox="allow-scripts" srcdoc="other stuff here"/></div>
</div>

Когда я получаю сообщение от одного из iframes, я хотел бы знать родительский div (т.Е. #sb1 или #sb2).

Я пробовал следующее, но это не работает:

 function receiveMessage(event)
{
  // Follow line results in : Uncaught DOMException: Blocked a frame with origin ...
  var parentDiv = $(event.source).parent();
}

window.addEventListener("message", receiveMessage);

Есть ли способ определить родительский элемент iframe без необходимости передавать идентификатор в сообщении из iframe?

1. Вероятно, нет, поскольку iframes блокируются политикой одного и того же источника.

2. Вы можете просмотреть iframe ‘s в документе, чтобы найти тот, у которого есть соответствующий window объект.

Ответ №1:

Я смог заставить это работать на основе комментария «Александр О’Мара».

 function receiveMessage(event)
{
  var parentDiv = $($('iframe').toArray().find(
      function(f) {
        return f.contentWindow === event.source;
      }
    )).parent();
}

window.addEventListener("message", receiveMessage);

Ответ №2:

В последнее время мне нужно было знать идентификатор кнопки, которая переключала модальный. ‘relatedTarget’ сработал для меня, это может сработать и в вашем случае.

     function receiveMessage(event)
    {
     var id = event.relatedTarget.id;
    }
    
    window.addEventListener("message", receiveMessage);