在同一页面上为两个iframe分配onload功能时遇到问题？

问题描述

我是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}";
    }
  }
};

仅当页面上只有一个本机tumblr音频播放器时，此代码才能很好地更改iframe样式。我做了一些控制台调试工作，发现在上面定义的onload函数中完成的所有操作对一个iframe进行了两次，而不是对每个iframe完成了一次。我认为这与外部for循环与内部的onload事件不能很好地工作有关吗？有人可以帮我吗？ PS：我也是stackoverflow的新手，因此，如果有人对如何最好地问问题也有任何建议，就可以了！

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

解决方法

哇，我的问题真好！经过一番研究，我发现了可以满足我目的的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

for-loop iframe iframe javascript tumblr

在同一页面上为两个iframe分配onload功能时遇到问题？

问题描述

解决方法

相关问答