如何解决在同一页面上为两个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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。