是否可以暂停 iframe？（所有脚本/css 动画停止）答案

【问题标题】：Is it possible to pause an iframe? (All scripts/css-animations stop)是否可以暂停 iframe？（所有脚本/css 动画停止）
【发布时间】：2018-01-18 07:34:17
【问题描述】：

看看codepen上的笔：http://codepen.io/

几秒钟后，它们都停止了。如果您检查这些元素，您会发现它们实际上是真正的 iframe，但不知何故，它们设法“暂停”了它们。

这是怎么做的？

【问题讨论】：

标签： animation iframe

【解决方案1】：

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

【讨论】：

我真的不明白你的意思。您发布的链接不会停止动画，它只会永远存在。这就是我想象它应该在首页（或它列出的任何地方）上的工作方式。相反，它会在几秒钟后停止动画。这就是我不明白它是如何完成的。
看看主页，进入 iFrame 并检查第三个 script 标签。有一个功能可以完成工作（它取消所有 CSS 动画）
我没看到，你能链接它（或告诉我哪一行）？

【解决方案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 的信息。

【讨论】：