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

あなたはこのようなものを持つことができます:

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