Question

<p>
    <a href="#" onclick="showStuff('lol'); return false;">
    <img src='play.png'><br>
    <span id="lol" style="display: none;">
        <iframe src="http://google.com" scrolling="no"></iframe>
   </span>
 </p>

使用此功能，当我点击'play.png'时，iframe将加载到图像下方。

我正在寻找的是：

A）如何在页面加载时“预加载”iframe？因此，当您单击图像时，iframe的内容已准备就绪。 B）我如何只显示iframe而不是图片+ iframe？我的意思是：当我点击图像时，它应该加载iframe - 所以隐藏原始图像。

非常感谢你！

Answer 1

你可以这样：

通过向主体添加display：none来隐藏iframe的所有内容。

单击执行以下功能：

function showIframeContent(){
   $(document.frames[0]).find('body').show();
}

Answer 2

使用以下javascript

<p><a href="#" onclick="showStuff('lol'); return false;"><img src='play.png'><br>
<span id="lol" style="display: none;">
    <iframe src="http://google.com" scrolling="no"></iframe>
</span>
</p>

function showStuff(key)
{
    if(document.getElementById(key).style.display == 'none')
    {
        document.getElementById(key).style.display="";
    }
    else
    {
        document.getElementById(key).style.display="none";
    }
}

onclick动作后隐藏元素

2 个答案: