使 iFrame 在页面启动时不加载答案

【问题标题】：Make iFrames not load on page start up使 iFrame 在页面启动时不加载
【发布时间】：2018-02-08 15:25:33
【问题描述】：

所以我的网站有一堆 iFrame 在网站加载时加载，但在点击按钮显示它们之前它们都是隐藏的。

问题是所有 iframe 都在一次加载，因此它的资源很重。我希望框架仅在您单击按钮时实际加载，并可能在再次单击按钮以隐藏它们时卸载。

这是我当前的其中一个 iFrame 的代码：

 <li data-value="iconchange"><img src="modules/icons/icons/calculator.png" width="65"  onclick = "calcShow()" class="calculator"></li> &nbsp;

这是让它在启动时隐藏的脚本

   <script type="text/javascript">
function calcShow() {
  var calc = document.getElementById('calcShow');
  if (calc.className == 'show') {
    calc.className = 'hide';
  }
  else if (calc.className == 'hide') {
    calc.className = 'show';
  }
}
</script>

然后是带有包含的 DIV

 <div id="calcShow" class="hide"><br><br><br>
       <?php

                        include("modules/calc/calc.html");
        ?>
       </div>

【问题讨论】：

标签： javascript php jquery html iframe

【解决方案1】：

好的，所以你想在按钮上加载 iframe 点击这里是一个例子尝试这样的事情

<div id="iframeContainer"></div>
<input type="btn" clas="btn btn-default" value="Click Me"/>

在脚本方面

<script>
$(function(){
$('#btn').on('click', function (e) { 
if(!$('#iframeContainer').length)
{
$('<iframe>', {
   src: 'Your link',
   width:'1062',
   height: '600',
   id:  'myFrame',
   frameborder: 0  
   }).appendTo('#iframeContainer'); 
});
}
else
{
if(!$('#iframeContainer').hasClass('hidden'))
     {
     $('#iframeContainer').addClass('hidden')
     }
 else
   {
    $('#iframeContainer').removeClass('hidden')
   }
 }
})
</script>

【讨论】：

您应该更喜欢这个解决方案而不是带有空 src-Tag 的解决方案。
你能给我看一个例子，说明我将如何使用上面提供的代码实现吗？我有点困惑。这是一张图片，是他们点击的而不是按钮。非常感谢。
老兄，您需要做的就是 1.give that img an id 2 创建一个空 div 以便您可以将 iframe 放在那里

【解决方案2】：

<iframe src="" class="iframe_class" />

点击功能

$('.iframe_class').attr('src', 'http://url.some.thing')

【讨论】：