如何修改代码以获取要加载的iframe onclick

我试图加快加载一个有几个iframe的页面。这些iFrame包含视频,当单击文本时,视频会向下滑动并开始播放。我的原始代码工作正常。

html

<span id="clickableText" class="link">click me</span>.<span><iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe></span>

css有一个“rect”类,它基本上是一个折叠的div,还有一个“open”类,随着转换向上滑动。

.rect{
    float: left;
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
    display: inline-block;
}

jQuery处理添加和删除类“open”以及播放和暂停视频。

jQuery

var frame = $("#frame");
var player;

frame.bind("load", function () {
    player = $(this).contents().find("#myVid");
    player.on('ended', function () {
        frame.removeClass("open");    
    });
 });

 $("#clickableText").click(function(){
    if (frame.hasClass("open")) {
        frame.removeClass("open");
        player[0].pause();
  } else {
        frame.addClass("open");
        player[0].play();
  }
 });

总之,这是可行的。但因为我的页面上有一些视频,所以加载速度非常慢。因此,在网上,我发现了一些关于点击加载iframe的建议。因此,我试图通过添加以下行来修改代码:

   frame.attr("src","iframe.html");

在这里:

 $("#clickableText").click(function(){

frame.attr("src","iframe.html");

if (frame.hasClass("open")) {

etc...

当然,也可以从html中删除iframe源代码,因此从我的iframe标记中去掉这一点:

src="iframe.html"