javascript - 如何延迟在 jquery 折叠的 div 中加载 iframe，直到单击 div/按钮之后？

Question

基本上，我在一个页面上有很多这样的折叠 div，它们在折叠的 div 中有 iframe。（我使用 css 使可点击的 div 看起来像一个按钮。）

问题是页面加载需要很长时间，因为基本上每次页面加载时它都会加载每个 iframe 中的每个域。

除非单击 div，否则我想延迟加载任何 iframe。

这是我目前的代码：

Javascript

jQuery(document).ready(function() {
  jQuery(".cont").hide();
  jQuery(".title").click(function()
  {
    jQuery(this).next(".cont").slideToggle(500);
  });
});

HTML

<div class="layer1">
<p class="title">test</p>
    <div class="cont">
        <iframe src="http://example.com" scrolling="no"></iframe>
    </div>
    <div class="cont">
        <iframe src="http://example2.com" scrolling="no"></iframe>
    </div>
    <div class="cont">
        <iframe src="http://example3etc.com" scrolling="no"></iframe>
    </div>

仍然需要一个解决方案。

Answer 1

单击按钮后仅将其插入 DOM 怎么样？

jQuery(document).ready(function() {
    $("cont1").click(function()
         {
            $("cont1").html("<iframe src='http://example1.com' scrolling="no"></iframe>")
          }
    );

    $("cont2").click(function()
         {
            $("cont2").html("<iframe src='http://example2.com' scrolling="no"></iframe>")
         }
     );

});

等等。之后您可以使用“删除”按钮删除 html 吗？