如何仅在iframe加载时运行代码

我一直在与这个问题斗争几天，现在终于找到了部分解决方案，但我认为它可以得到改进。如何仅在iframe加载时运行代码

在我的项目中，我有一系列包含视频的iframe。单击链接时会显示幻灯片切换，并且当再次单击链接时，视频将停止，并且包含iframe的span也会隐藏并进行转换。

这是通过添加和删除一个css类的“打开”，其中有一个高度和过渡。除此之外，我还有一个事件监听器，可以在视频结束时折叠包含范围。所有这一切正常工作，并节省时间我不张贴代码。

我遇到的问题是页面加载时间很慢，所以我从0123中删除属性iframe，并将它移到我的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); 
     } 


});

相当新的发展，所以我想找这样做最简单的方法。任何帮助赞赏。

来源

2016-11-16 Paul

使用''onload''听众的''iframe''？ – Crowes

这是加载iframe时调用代码的一个非常简单的示例。退房onload属性iframe标签：

<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>

来源

2016-11-16 11:13:34

如何仅在iframe加载时运行代码

回答

相关问题