如何阻止网页所有iframe加载并替换为文本？现有代码存在部分失效问题

你遇到的问题是因为document.getElementsByTagName('iframe')返回的是动态HTMLCollection——这个集合会实时反映DOM的变化。当你替换掉一个iframe后，集合的长度会自动减少，同时剩余元素的索引会向前偏移。比如循环到第0个元素并替换后，原来的第1个元素会变成新的第0个，但此时循环变量i已经变成1，直接跳过了这个元素，导致部分iframe没被处理。

有两种可靠的方法解决这个问题：

方法一：倒序遍历 #

从最后一个iframe开始向前处理，这样即使DOM变化导致集合更新，也不会影响未处理的元素索引：

var iframes = document.getElementsByTagName('iframe');
// 从最后一个元素开始倒序循环
for (var i = iframes.length - 1; i >= 0; i--) {
  var iframe = iframes[i];
  var div = document.createElement('div');
  div.innerHTML = 'Hello, I\'m an iframe';
  iframe.parentNode.replaceChild(div, iframe);
}

方法二：转为静态数组 #

把动态的HTMLCollection转为静态数组，这样后续DOM变化不会影响数组内容，遍历数组即可处理所有iframe：

// 将动态集合转为静态数组
var iframes = Array.from(document.getElementsByTagName('iframe'));
for (var i = 0; i < iframes.length; i++) {
  var iframe = iframes[i];
  var div = document.createElement('div');
  div.innerHTML = 'Hello, I\'m an iframe';
  iframe.parentNode.replaceChild(div, iframe);
}

或者用更简洁的forEach遍历：

Array.from(document.getElementsByTagName('iframe')).forEach(iframe => {
  const div = document.createElement('div');
  div.innerHTML = 'Hello, I\'m an iframe';
  iframe.parentNode.replaceChild(div, iframe);
});

如果要彻底阻止iframe加载，建议在DOM刚加载时就执行这段代码——比如绑定DOMContentLoaded事件，或者直接把代码放在<head>标签内同步执行，避免iframe开始加载后再替换。

内容的提问来源于stack exchange，提问作者Kwvdb