在 addEventListener 中查找源 iframe 的周围元素

Question

我有一个 shell 页面，其中包含许多沙盒 iframe。

例如

<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>

当我收到来自其中一个 iframe 的消息时，我想知道父 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 的消息中传递 id？

Answer 1

最近我需要知道切换模式的按钮的 ID。 'relatedTarget' 对我有用，它可能也适用于你的情况。

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

Answer 2

我能够根据 "Alexander O'Mara" 评论使它工作。

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

window.addEventListener("message", receiveMessage);

在 addEventListener 中查找源 iframe 的周围元素

Find surrounding element of source iframe in addEventListener

html

javascript

iframe

sandbox