检测何时从第三个（父）iframe 加载另一个 iframe 中的 iframe

Question

Brainf... 使用 iframe。

所以，当前页面结构：

page -> main_iframe -> iframe1 -> iframe2

脚本在“main_iframe”中执行。 这个“main_iframe”有“iframe1”，“iframe1”里面有“iframe2”：

我想更改 iframe2 的 width=100%，它在 iframe1 内，它在 main_iframe 内

所以我在“main_iframe”执行以下 js，它可以工作：

document.querySelector('#iframe1').onload = function() {

setTimeout(function(){
        document.querySelector('#iframe1').contentDocument.querySelectorAll("iframe")[0].style.width = '100%';
 }, 3000); 

}

但是如何删除超时计时器，以便在 iframe2 加载后立即呈现？

我尝试了以下方法：

document.querySelector('#iframe1').onload = function() {

document.querySelector('#iframe1').contentDocument.querySelectorAll("iframe")[0].onload = function () {
        document.querySelector('#iframe1').contentDocument.querySelectorAll("iframe")[0].style.width = '100%';
  }

};

但如果没有运气，onload 触发后什么也没有发生。

Answer 1

您可以在 load 事件处理程序中使用 this 引用外部 iframe，这样会更整洁一些。这应该可以满足您的需求...

document.querySelector("#iframe1").addEventListener("load", function() {
    this.contentDocument.querySelector("iframe").style.width = "100%";
});