Javascript 仅在类出现在容器div中后加载iframe（无jquery）

我有一个独特的问题，我在一个页面上加载了很多iFrame，这会显著降低性能

因为它们都在弹出模式中，我想在有人点击模式后触发iframe加载

当使用JS加载模式时，将添加一个名为“.in”的类，并且此数据属性将从true更改为false“aria hidden=“false”

以下是作为触发器的DIV示例：

<div id="ModalPopUp-data-integration-service" class="modal hide fade in" data-
backdrop="true" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">

以下是我要加载的iframe：

<iframe src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>

---

这是您可以使用的。默认情况下，不要为iframe设置

src

属性，例如

data src

one：

<iframe data-src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>

也就是说，你最好在演示中使用相关的模态事件，检查文档。但你的站点确实有问题，需要调试。我真的不想粗鲁。它需要像其他回答中所说的那样进行严重的重构

---

我甚至不知道为什么在我猜只有一个表单时使用iframe，在每个打开事件模式相关信息上设置就足够了。

酷，我会更新，如果你正在处理弹出窗口的点击事件，你可以随时设置iframe的src。最初你可以将iframe设置为空的“src”或设置为“src”“到空html。

我想在有人单击模式后触发iframe加载

您必须更好地描述您期望的行为？单击哪个按钮？如需查看@Jas comment，只需在需要时设置iframe的

src

属性即可。您还可以使用

变异观察者

来观察元素上DOM的变化@是的，那将是理想的。我对JS真的很糟糕，所以我需要帮助我找出如何编写代码。Upped

transitionend

nice。这在大多数弹出窗口中都有效，但不是全部。有什么建议吗？

document.addEventListener('transitionend', function(e) {
  var iframe = e.target.id === "ModalPopUp-third-party-content" && e.target.querySelector('iframe');
  if (iframe && !iframe.src) {
    iframe.src = iframe.dataset.src;
  }
}, false);