在 vanilla JS 中通过多个 iframe 走上 DOM

Question

我希望能够从一个或多个嵌套 iframe 中向上走 DOM，以抓取并清空顶部 iframe 的父 div。如果只有一个 iframe，或者有两个 iframe，我希望我的 JS 能够正常工作。

我有一个带有这个 iframe 的主页：

<div class="ad-unit">
  <div class="ad-unit-large">
    <iframe width="970" height="250" src="ad.html"></iframe>
  </div>
</div>

然后在ad.html，iframe 内的页面，我有这个 JavaScript：

function getAdSlot() {
  var el = window.frameElement.parentNode;
  for (; el; el = el.parentNode) {
    if (el.classList && el.classList.contains('ad-unit')) return el;
  }
  return false;
}

var el = getAdSlot();
console.log(el);
el.innerHTML = '';

这会遍历包含页面的 DOM，直到找到类为 ad-unit 的 div 并将其清空。

这很好用。但不幸的是，有时ad.html 会在嵌套在第一个 iframe 中的第二个 iframe 中提供，所以：

<div class="ad-unit">
  <div class="ad-unit-large">
    <iframe width="970" height="250" src="frame.html"></iframe>
  </div>
</div>

而frame.html 将包含：

<iframe width="970" height="250" src="ad.html"></iframe>

谁能告诉我如何处理这个案子？我试过用

开始我的脚本

var el = document;

但是当 DOM 到达第一个 iframe 时，它​​会停止行走。无论父节点是 div 还是 iframe，我如何才能继续向上移动 DOM？

Answer 1

如果找不到正确的 div，则必须使用 parent 上到下一个 iframe（或顶级 window）

function getAdSlot(win) {
  var el = win.frameElement.parentNode;
  for (; el; el = el.parentNode) {
    if (el.classList && el.classList.contains('ad-unit')) return el;
  }
  // Reached the top, didn't find it 
  if (parent === top) {
     return false;
  }
  // Try again with the parent window 
  return getAdSlot(parent);
}
var el = getAdSlot();
console.log(el);
el.innerHTML = '';