是否可以暂停iframe？ （所有脚本/ css-animations停止）

Question

查看代码笔上的笔：http://codepen.io/

几秒钟之后，他们都停了下来。如果你检查这些元素，你会发现它们实际上是真正的iframe，但不知怎的，他们设法“暂停”它们。

这是怎么做的？

Answer 1

由加载的内容完成，请参阅http://codepen.io/rafaelcastrocouto/full/pfxat的来源（第一个的iFrame路径）。

Answer 2

我知道这是一篇非常古老的帖子，但对于那些在2018年仍然很好奇的人来说：

你需要

• 禁用动画
• 禁用音频/视频元素
• 包装并设置超时
• 将其注入每个iFrame

不用担心，这很简单直接。

禁用所有CSS动画

以下内容将查找并遍历DOM中呈现的所有节点。对于每个HTMLElement，它会将CSS属性设置为“暂停”。

function disablewebkitAnimations() {
    var nodes = document.querySelectorAll('*')
    for (var i = 0; i < nodes.length; i++) {
        style = nodes[i].style
        style.webkitAnimationPlayState = 'paused'
        document.body.className = 'paused'
    }
}

禁用音频/视频

以下函数将选择 type 类型的所有元素，迭代它们并简单地调用 pause（）方法。

function pauseElementTypes(type) {
    let nodes = document.querySelectorAll(type)
    for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
        els[i].pause();
    }
}

注意：这将不停止未在DOM中呈现的音频和视频元素。这意味着如果您创建一个新的HTMLAudioElement，然后播放它但不将其附加到您的文档，它将继续播放。这就是为什么CodePen上的一些笔有时候仍会设法发出声音的原因。

将其包装

一个简单的函数，完成我们刚刚描述的所有内容。

function iFrameDisable() {
    disablewebkitAnimations()
    pauseElementTypes("audio")
    pauseElementTypes("video")
}

setTimeout(iFrameDisable, 4000) // execute after 4 seconds

进样

基本上，在CodePen上，他们会在搜索结果的每个iFrame中注入以下代码。 （函数名称可能不同，但概念上相同）

<script>
function disablewebkitAnimations() {
    var nodes = document.querySelectorAll('*')
    for (var i = 0; i < nodes.length; i++) {
        style = nodes[i].style
        style.webkitAnimationPlayState = 'paused'
        document.body.className = 'paused'
    }
}

function pauseElementTypes(type) {
    let nodes = document.querySelectorAll(type)
    for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
        els[i].pause();
    }
}

function iFrameDisable() {
    disablewebkitAnimations()
    pauseElementTypes("audio")
    pauseElementTypes("video")
}

setTimeout(iFrameDisable, 4000)
</script>

详细了解开发中的disabling iFrames