我已经与这个问题斗争了几天，终于找到了部分解决方案，但我认为它可以改进。
在我的项目中，我有一系列包含视频的 iframe。单击链接时，会显示幻灯片过渡，再次单击链接时，视频会停止，并且包含 iframe 的 span 也会通过过渡隐藏。
这是通过添加和删除具有高度和过渡的“open”CSS 类来实现的。除此之外，我还有一个事件监听器，当视频结束时，它也会折叠包含的跨度。所有这些工作正常，为了节省时间，我没有发布代码。
我遇到的问题是页面加载时间慢，因此我从 html 中删除了 iframe 的 src 属性，并将其移至我的 js 文件中，然后仅在执行单击后才分配它。这不起作用，我意识到我需要 iframe 完全加载，然后才能运行“click”方法中的其余代码。所以我把这部分代码延迟了100ms。
所有这些都有效，但我觉得最好不要在 100 毫秒后运行其余代码，而是在加载 iframe 时运行(以防较慢的计算机查看页面)。不知道该怎么做。
这是现在的代码:
var player;
var frame = $("#frame");
frame.bind("load", function () {
player = $(this).contents().find("#myVid");
player.on('ended', function () {
frame.removeClass("open");
});
});
$("#clickableLink").click(function(){
if (frame.hasClass("open")) {
frame.removeClass("open");
frame.contents().find('#myVid').get(0).pause();
} else {
function delayed(){
frame.addClass("open");
frame.contents().find('#myVid').get(0).play();
}
frame.attr("src","iframe.html");
setTimeout(delayed, 100);
}
});
对开发相当陌生，所以我正在寻找最简单的方法来做到这一点。任何帮助表示赞赏。
最佳答案
这是一个在 iframe 加载时调用代码的 super 简单示例。查看 iframe 标记的 onload 属性:
<head>
<script>
function frameLoaded() {
alert('frame loaded!');
};
</script>
</head>
<body>
<iframe id="frame" src="https://en.wikipedia.org/wiki/HTML_element#Frames" onload="frameLoaded(this)" />
</body>关于javascript - 如何仅在 iframe 加载时运行代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40629777/