hide div and show iframe with countdown using javascript

问题

When the page load this iframe class="frame_src" must be hidden like, display="none"

And after 10 seconds this div must hide class="load_video" and show iframe class="frame_src"

Right now the problem is when countdown is counting somehow the iframe video plays in background, I can hear it, and when the 10 seconds elapsed, it will play the video again.

Here's my full code : http://plnkr.co/edit/LhxRjJXBnCGKGfW4ZLWO?p=preview

Here's my javascript code :

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

回答1:

OK, you have to clear the content of the iframe as well as it's src.

You can use about:blank for it's src as it loads a bland page in the iframe

so if you add

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

to the beginning of the startschedule() function, it will do the trick for you.

your function should look like this after the change:

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

来源：https://stackoverflow.com/questions/33945525/hide-div-and-show-iframe-with-countdown-using-javascript

标签

javascript

jquery

iframe