在香草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>

然后在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 （或顶级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 = '';