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

Question

当页面加载时，此iframe class="frame_src"必须像display="none"这样隐藏

在10秒钟后，该div必须隐藏class="load_video"并显示iframe class="frame_src"

现在的问题是，当倒数计时到iframe视频以某种方式在后台播放时，我可以听到，而在10秒钟后，它将再次播放视频。

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

这是我的JavaScript代码：

<script>
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()
};
</script>

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