使 iFrame 在页面启动时不加载

Posted 2023-05-09

【中文标题】使 iFrame 在页面启动时不加载

【英文标题】：Make iFrames not load on page start up

【发布时间】：2018-02-08 15:25:33

【问题描述】：

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

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

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

 <li data-value="iconchange"><img src="modules/icons/icons/calculator.png"   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>

【参考方案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')