使用javascript隐藏div并使用倒计时显示iframe [英] hide div and show iframe with countdown using javascript

问题描述

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

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

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

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

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

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.

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

这是我的javascript代码：

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>

推荐答案

好的，你必须清除<的内容code> iframe 以及它的 src 。

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

你可以使用 about：blank 因为它是 src 因为它在 iframe

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

所以如果你添加

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

到 startschedule（）开头功能，它会为你做的。

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

这篇关于使用javascript隐藏div并使用倒计时显示iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！