javascript - 使 iFrame 不在页面启动时加载

Question

所以我的网站有一堆 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>

然后是带有 include 的 DIV

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

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

Answer 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>