Load iframe only when needed

I h开发者_运维百科ave the below where trigger open is a sliding div that exposes the cnt class housing the iframe. I want the iframe to only load when the trigger is activated exposing the iframe.

How do I load the iframe only when clicked vs as the page loads?

    <div class="trigger open"><a href="#">Search The Map</a></div>

<!-- Hidden until Trigger class is clicked -->
    <div class="cnt">
        <iframe width="500" height="500" frameborder="0" scrolling="no" src="http://externalpage.com/"></iframe>
    </div>

---

Could be on this way?

Also you would try this.

---

You can either set the iframe's src to something like "about:blank" to prevent it from loading anything (should work in most modern browsers) but the better idea would be to just innerHTML the whole iframe when it's actually needed. Then show / hiding <div class="cnt"> after that.