javascript - 使用 javascript 隐藏 div 并显示带有倒计时的 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)
}