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