Question

所以我的网站上有一堆iFrame，当网站加载时加载，但它们都被隐藏，直到他们点击按钮显示它们。

问题是所有的iframe都是一次加载所以它的资源很重。我希望只有在你点击按钮时才能正常加载帧，并且当他们再次点击按钮隐藏它们时可能会卸载。

以下是我目前只有一个iFrame的代码：

   <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 id="calcShow" class="hide"><br><br><br>
       <?php

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

然后是包含

的DIV

import org.glassfish.jersey.media.multipart.FormDataMultiPart;

FormDataMultiPart fdm=new FormDataMultiPart();
fdm.field("abc", Object o1, MediaType.APPLICATION_yourmediatype).field("cba", 
Object o2, MediaType.APPLICATION_yourmediatype);
Response response=Response.ok(fdm, MediaType.MULTIPART_FORM_DATA).build();

Answer 1

okey所以你想在按钮上加载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>

Answer 2

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

点击功能

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

在页面启动时无法加载iFrame

2 个答案: