将 onload 函数分配给同一页面上的两个 iframe 时出现问题？

Question

我是新手 JavaScript 用户，正在尝试制作 Tumblr 主题。我正在尝试使用 JS 为本机 Tumblr 音频播放器设置样式，因为它位于 iframe 中。问题：当两个 tumblr 音频播放器加载到同一页面时，只有一个被设置样式。到目前为止，这是我的 JS：

var audioIframes = document.body.getElementsByClassName("tumblr_audio_player");
var i;
for (i = 0; i < audioIframes.length; i++) {
  var audioIframeWindow = audioIframes[i].contentWindow;
  audioIframes[i].onload = function () {
    audioIframeDoc=audioIframeWindow.document;
    /*introduce font stylesheet to iframe*/
    var head = audioIframeDoc.head;
    var link = audioIframeDoc.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";
    head.appendChild(link);
    /*actually editing some styles*/
    var audioPlayer = audioIframeDoc.body.getElementsByClassName("audio-player");
    for (j = 0; j < audioPlayer.length; j++) {
      audioPlayer[j].style.background = "{color:2}";
      audioPlayer[j].style.color = "{color:3}";
      audioPlayer[j].style.fontFamily = "Epilogue,sans-serif";
    }
    var audioPBar = audioIframeDoc.body.getElementsByClassName("progress");
    for (k = 0; k < audioPBar.length; k++) {
      audioPBar[k].style.background = "{color:1}";
    }
    var audioArtist = audioIframeDoc.body.getElementsByClassName("track-artist");
    for (l = 0; l < audioArtist.length; l++) {
      audioArtist[l].style.color = "{color:3}";
    }
  }
};

此代码在更改 iframe 样式方面效果很好，但前提是页面上只有一个本机 tumblr 音频播放器。我做了一些控制台调试工作，发现在上面定义的 onload 函数中完成的所有事情都会对其中一个 iframe 完成两次，而不是对每个 iframe 完成一次。我认为这与外部 for 循环不能很好地与内部的 onload 事件一起工作有关吗？有人可以帮我吗？ PS：我也是 Whosebug 的新手，所以如果有人对如何最好地提出问题有任何提示，那也很棒！

编辑：这是我标记所有音频帖子的博客页面：https://smileytiger28.tumblr.com/tagged/debuggingfornow。在控制台中，您可以看到拉起六个 #document 元素。前三个只有空的 <head> 和 <body> 元素，因为它们是在加载 iframe 之前记录的。最后三个 #document 元素都来自 onload 函数内部，因此它们都有实际内容，但它们都来自同一个 iframe！这意味着问题在于 onload 函数循环了正确的次数，但仅针对其中一个 iframe。你能帮我弄清楚为什么吗？

Answer 1

哇，好问题，我！经过一些研究，我在 jQuery 中找到了一个解决方案，可以满足我的目的

$(document).ready(function(){
  $(".tumblr_audio_player").ready(function (){
    $(".tumblr_audio_player").each(function(index,element){
      element.onload = function(){
        // attach Epilogue font in a stylesheet
        let hid = element.contentWindow.document.getElementsByTagName("HEAD")[0];
        let link = element.contentWindow.document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = "https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";
        hid.appendChild(link);
        //main style changes
        let biddy = element.contentWindow.document.getElementsByTagName("BODY")[0];
        let audioPlayer = biddy.getElementsByClassName("audio-player");
        for (j = 0; j < audioPlayer.length; j++) {
          audioPlayer[j].style.background = "{color:2}";
          audioPlayer[j].style.color = "{color:3}";
          audioPlayer[j].style.fontFamily = "Epilogue,sans-serif";
        }
        let audioPBar = biddy.getElementsByClassName("progress");
        for (k = 0; k < audioPBar.length; k++) {
          audioPBar[k].style.background = "{color:1}";
        }
        let audioArtist = biddy.getElementsByClassName("track-artist");
        for (l = 0; l < audioArtist.length; l++) {
          audioArtist[l].style.color = "{color:3}";
        }
      };
    });
  })
})

希望对您有所帮助 :P

将 onload 函数分配给同一页面上的两个 iframe 时出现问题？

Problem assigning onload function to two iframes on the same page?

javascript

iframe

for-loop

onload

tumblr