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

我想加快加载有几个iframe的页面。这些iframe包含视频，当单击文本时滑下并开始播放。我的原始代码有效。如何修改代码以获取iframe加载onclick

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有一类“矩形”，基本上是一个折叠的股利和一类的“开放”与过渡向上滑动的。

CSS

.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的交易。

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"

哪个修复页面加载速度缓慢但...这里是我被卡住的地方。当iframe打开时，您可以看到视频的第一个图像，但它没有播放，也没有声音。页面的加载虽然很精彩，但如果我能够实现它的功能，那么我就处于正确的轨道上......不用说，任何建议都将不胜感激。通过jQuery

onClick='document.getElementById("frame").src="iframe.html";'

或拨打源文件上点击：

来源

2016-11-15 Paul

删除IFRAME SRC在HTML：

<iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>

呼叫源文件上点击在JavaScript

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

来源

2016-11-15 21:29:07 yakutsa

你可以将iframe src存储在数据属性中，并通过单击可点击文本来加载它：

$('#clickableText').on('click', function(e) { 
     e.preventDefault(); 
     $('iframe').each(function() { 
      $(this).removeClass('open'); 
      $(this).attr('src', ' '); 
     });   
     var vURL = $(this).find('iframe').data('src'); 
     $(this).find('iframe').attr('src', vURL).addClass('open'); 
});

上面的代码还会循环并从当前正在播放的iframe中删除打开，如果在同一页上有多个iframe。这种技术适用于具有多个iframe的页面，因为它们都不会加载，除非它们被点击。至于存储的src设置你的iframe代码是这样的：

<iframe id="frame" class="rect" data-src="iframe.html" src="" scrolling="no" marginwidth=0 marginheight=0></iframe>

来源

2016-11-15 21:45:27

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

回答

相关问题