当 div 出现时运行 javascript答案

【问题标题】：Run javascript when div shows up当 div 出现时运行 javascript
【发布时间】：2012-11-16 13:07:36
【问题描述】：

当 DIV 出现时，我需要运行 javascript（停止 JWPlayer）。它显示大约。页面完全加载后 15 秒。

目前为止的代码

if (document.getElementById("overlay_div")) { jwplayer().stop(); }

我猜我的代码会在页面加载时查找 overlay_div，而不是在一段时间后（在本例中为 15 秒）

编辑：事实证明，DIV 实际上一直存在，但在此时间间隔后它从 display: none 切换到 display:block 。有什么方法可以运行 div 显示的脚本：block

Edit2：我在@elbunuelo 的帮助下自己解决了这个问题如果有人需要，这里是代码：

var interval = setInterval(function(){
 if (document.getElementById("overlay_main_div").style.display=="block"){ 
      jwplayer().stop(); 
      clearInterval(interval);
 } }, 1000);

【问题讨论】：

而不是将您的逻辑基于 div 可见性，将 jwplayer().stop() 放在实际显示 div 的同一函数中不是更好吗？

标签： javascript jwplayer

【解决方案1】：

您可以在 div 之后添加 script 标签，这样它就会在标记到位时运行。

<div id="overlay_div"></div>
<script type="text/javascript">
if (document.getElementById("overlay_div")) { jwplayer().stop(); }
</script>

【讨论】：

【解决方案2】：

您是否尝试过使用间隔？即每隔 1000 毫秒左右检查一次 div 是否存在然后停止播放器？

var interval = setInterval(function(){
     if (document.getElementById("overlay_div")) { 
          jwplayer().stop(); 
          clearInterval(interval);
     }
}, 1000);

【讨论】：

谢谢，这很有帮助，但是，事实证明 DIV 实际上一直都在那里，但是在此时间间隔之后它从 display: none 切换到 display:block 。有什么办法可以在 div 变成 display: block 时运行脚本？
我知道如何在 Mootools 中做到这一点，但我不记得如何在原生 Javascript 中获得特定的样式规则。你在使用任何框架吗？快速编辑：如果您不使用任何框架，this 帖子可能会很方便。只需获取“显示”样式并检查其是否设置为阻止而不是检查元素是否存在

【解决方案3】：

这取决于 div 元素的显示方式：

在您的代码中：只需调用函数；）
在第三方代码中：
- 如果节点被插入到 DOM 树中，则使用突变事件观察器https://developer.mozilla.org/en-US/docs/DOM/MutationObserver?redirectlocale=en-US&redirectslug=DOM%2FDOM_Mutation_Observers
- 如果节点以另一种不可检测的方式（CSS 添加）显示，并且作为前一种方法的后备，只需创建一个超时调用并将其限制为 n 次：

var times=0;
function divcheck() {
    if (document.getElementById("overlay_div")) { jwplayer().stop(); }
    else if(times<10) { times++; setTimeout(divCheck,1000); }
    }

setTimeout(divCheck,15000);

【讨论】：