javascript - 在 vanilla JS 中通过多个 iframe 遍历 DOM

Question

我希望能够从一个或多个嵌套 iframe 内部遍历 DOM，以抓取并清空顶部 iframe 的父 div。如果只有一个或两个 iframe，我希望我的 JS 能够工作。

我有一个带有此 iframe 的主页:

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

然后在 iframe 内的页面 ad.html 中，我有以下 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(或顶级 窗口)。

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 = '';