Javascript 并不是所有的iframe都被更换

发布于03月16日

我在用每个iframe的文本替换iframe时遇到了问题.下面是一个例子:

// once
console.log(document.getElementsByTagName("iframe").length)
for (let iframe of document.getElementsByTagName("iframe")) {
  iframe.replaceWith(`"${iframe.title}": ${iframe.src}`)
}

// twice
console.log(document.getElementsByTagName("iframe").length)
for (let iframe of document.getElementsByTagName("iframe")) {
  iframe.replaceWith(`"${iframe.title}": ${iframe.src}`)
}

// thrice
console.log(document.getElementsByTagName("iframe").length)
for (let iframe of document.getElementsByTagName("iframe")) {
  iframe.replaceWith(`"${iframe.title}": ${iframe.src}`)
}
console.log(document.getElementsByTagName("iframe").length)

<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

如控制台所示，我们从7个iframe开始，然后下降到3，然后是1，最后是0.为什么第一个for循环没有取代所有的iframe？我做错什么了吗？

(async()=>{ await new Promise(r=>{ // once let count; console.log(count = document.getElementsByTagName("iframe").length); for (let iframe of document.getElementsByTagName("iframe")) { iframe.onload = () =>{ count--; iframe.replaceWith(`"${iframe.title}": ${iframe.src}`); count || r(); }; } }); // twice console.log(document.getElementsByTagName("iframe").length) for (let iframe of document.getElementsByTagName("iframe")) { iframe.replaceWith(`"${iframe.title}": ${iframe.src}`) } // thrice console.log(document.getElementsByTagName("iframe").length) for (let iframe of document.getElementsByTagName("iframe")) { iframe.replaceWith(`"${iframe.title}": ${iframe.src}`) } console.log(document.getElementsByTagName("iframe").length) })();

(async()=>{ await new Promise(r=>{ // once let count; console.log(count = document.getElementsByTagName("iframe").length); [...document.getElementsByTagName("iframe")].forEach(f => { f.style.display = 'none'; f.parentElement.insertBefore(document.createTextNode(`"${f.title}": ${f.src}`), f); }); for (let iframe of document.getElementsByTagName("iframe")) { iframe.onload = () =>{ count--; iframe.remove(); count || r(); }; } }); // twice console.log(document.getElementsByTagName("iframe").length) for (let iframe of document.getElementsByTagName("iframe")) { iframe.replaceWith(`"${iframe.title}": ${iframe.src}`) } // thrice console.log(document.getElementsByTagName("iframe").length) for (let iframe of document.getElementsByTagName("iframe")) { iframe.replaceWith(`"${iframe.title}": ${iframe.src}`) } console.log(document.getElementsByTagName("iframe").length) })();

Javascript 并不是所有的iframe都被更换

推荐答案

Javascript相关问答推荐

React存档iframe点击行为

materialized - activeIndex返回-1

按下同意按钮与 puppeteer 师

将自定义排序应用于角形数字数组

在服务器上放置了Create Reaction App Build之后的空白页面

Angular 订阅部分相互依赖并返回数组多个异步Http调用

Reaction Native中的范围滑块

我在Django中的视图中遇到多值键错误

提交链接到AJAX数据结果的表单

基于props 类型的不同props ，根据来自接口的值扩展类型

在使用REACT更改了CSS类之后，无法更改CSS样式

创建以键值对为有效负载的Redux Reducer时，基于键的类型检测

邮箱密码重置链接不适用于已部署的React应用程序

将嵌套数组的元素乘以其深度，输出一个和

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

react 路由如何使用从加载器返回的数据

如何在独立的Angular 应用程序中添加Lucide-Angel？

我无法在Api Reaction本机上发出GET请求

JS/css：将数字输入的S函数和可调整大小的元素S函数绑定在一起

如何从图表中映射一组图表-js使用REACT