javascript - onclick 操作后隐藏元素

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";
    }
}