父文档

Question

我需要在事件处理程序函数中从其子元素访问iframe元素对象。

一个例子就是这样。

function callback(ev) {
  //get the event target element
  var targetElement = ev.target;

  //get the document object of the target element
  var doc = targetElement.ownerDocument;

  //Question: how to get to the doc's iframe object
  // I tried these properties below, both returns null
  var ifrmEle = doc.parentElement;
  var ifrmEle = doc.parentNode;
}

假设在上面的示例中targetElement是body元素，所以我的问题是如何访问拥有body元素的iframe元素？

感谢您的专业知识。

Answer 1

没有方便的属性可以为您提供该信息。

最接近的操作是遍历父文档中的所有框架，直到找到一个包含相同文档的框架。

父文档

<!DOCTYPE html>
<meta charset="utf-8">
<title>Iframe Parent</title>
<h1>Iframe Parent</h1>
<iframe src="iframe.html" name="one"></iframe>
<iframe src="iframe.html" name="two"></iframe>
<iframe src="iframe.html" name="three"></iframe>
<iframe src="iframe.html" name="four"></iframe>

子文档

<!DOCTYPE html>
<meta charset="utf-8">
<title>Iframe</title>
<h1>Iframe</h1>
<p>This document is in a frame named <span>?</span>.</p>
<script>
    parent.document
    .querySelectorAll('iframe, frame')
    .forEach(frame => {
        if(frame.contentWindow.document === document) {
            document.querySelector('span').textContent = frame.name;
        }
    });
</script>

如何从其子元素访问iframe元素

1 个答案:

父文档

子文档