使用javascript隐藏div并使用倒计时显示iframe

当页面加载时，iframe class="frame_src"必须隐藏，如display="none"

10秒后，这个div必须隐藏class="load_video"并显示iframe class="frame_src"

现在的问题是当倒计时以某种方式计算iframevideo在后台播放时，我可以听到它，当10秒过去时，它将再次播放video。

这是我的完整代码： http ： //plnkr.co/edit/LhxRjJXBnCGKGfW4ZLWO？p = preview

这是我的javascript代码：

  function startChecking() { secondsleft -= 1e3, document.querySelector(".load_video").innerHTML = "Please Wait.. " + Math.abs(secondsleft / 1e3) + " Seconds", 0 == secondsleft && (clearInterval(interval), $(".reloadframe").show(), document.querySelector(".load_video").style.display = "none", document.querySelector(".frame_src").style.display = "", document.querySelector(".frame_src").src = document.querySelector(".frame_src").getAttribute("data-src")) } function startschedule() { clearInterval(interval), secondsleft = threshold, document.querySelector(".load_video").innerHTML = "Please Wait.. " + Math.abs(secondsleft / 1e3) + " Seconds", interval = setInterval(function () { startChecking() }, 1e3) } function resetTimer() { startschedule() } var timeout, interval, threshold = 1e4, secondsleft = threshold; window.onload = function () { startschedule() };  

Answer 1

好的，您必须清除iframe的内容以及它的src 。

您可以使用about:blank为它的src因为它在iframe加载了一个平淡的页面

所以，如果你添加

 document.querySelector(".frame_src").src = "about:blank"; 

在startschedule()函数的开头，它会为你做的伎俩。

更改后，您的函数应如下所示：

 function startschedule() { document.querySelector(".frame_src").src = "about:blank"; clearInterval(interval), secondsleft = threshold, document.querySelector(".load_video").innerHTML = "Please Wait.. " + Math.abs(secondsleft / 1e3) + " Seconds", interval = setInterval(function() { startChecking() }, 1e3) }