使页面启动时iFrame无法加载

因此，我的网站有一大堆加载网站时加载的iFrame，但它们都隐藏起来，直到他们点击一个按钮来显示它们。使页面启动时iFrame无法加载

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

这里是我当前的代码只是I帧的一个：

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

来源

2017-08-30 Dalton Metzler

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

on cli CK功能

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

来源

2017-08-30 19:38:59 pheaselegen

好，所以你要加载上按一下按钮的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>

来源

2017-08-30 19:45:34

你应该更喜欢这种解决方案使用空的src-Tag解决方案。 – iquellis

你能告诉我一个关于如何用我上面提供的代码实现的例子吗？我有点困惑。这是一张图片是他们点击的不是一个按钮。非常感激。 –

花花公子所有你需要做的是1.give img一个id 2创建一个空的div，这样你就可以把你的iframe放在那里 –

使页面启动时iFrame无法加载

回答

相关问题