How to make the iframe not immediately loaded?

I try to hide it through the style of css: display: none; B through JS I restore it by clicking on the button. But despite this, it still loads.

    1 answer 1

    You just need to set the src attribute for the <iframe> element by clicking:

     (function () { var button = document.querySelector('button'); var iframe = document.querySelector('iframe'); button.addEventListener('click', function () { iframe.src = iframe.getAttribute('data-src'); iframe.classList.toggle('hidden'); }); })(); 
     iframe { display: block; } .hidden { display: none; } 
     <button>Show iframe</button> <iframe class="hidden" data-src="//w3.org"></iframe>

    https://jsfiddle.net/jrrjatt7/

    Brought another option without JS, which can be useful:

     iframe { display: block; } 
     <a href="//w3.org" target="w3"> <button>Show iframe</button> </a> <iframe name="w3"></iframe>

    https://jsfiddle.net/am2fgqrp/

    However, he has two minuses. True, these disadvantages are indirect, because, as you understand, everything depends on what we want to implement:

    1. iframe can not be hidden initially.
    2. After the second click on the button-link, the iframe not hidden, but simply downloaded again.

    It would be possible, of course, to be reverted with input type="checkbox" and label to implement the same functionality as when using JS, but label and a not compatible (see the comment here ); Yes, and it is not worth it: JS - our everything!