如何修改代碼以獲取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

回答

相關問題