Control when an Iframe is loaded on a webflow site

Design help Custom code
2

I figured it out, and I thought I should post my solution for reference.

The key is to have your iframe source be ‘about:blank’, and then have your iframe data-source hold the URL you’re wanting to open. You also need to specify your individual iframes with id tags for reference. See below:

<iframe id="homepage" width="560" height="315" data-src="http://google.com" src="about:blank" frameborder="0" allowfullscreen></iframe>

Setting up your iframes as such will have them open initially as blank object (they’ll reference the “about:blank”). This works for my needs because I have my iframes set to display:none on page load anyways.

The buttons you want to use to load the iframes will need unique ID tags given in the elements panel. The button IDs and the iframe internal IDs are what you then reference in the jquery, which you put in the project footer code section.

The code that works for me can be seen below:

    <script>
$(document).ready(function() {
   $("#button_homepage").click(function(){
    var iframe = $("#homepage");
    iframe.attr("src", iframe.data("src"));
   });
   $("#button_tour").click(function(){
    var iframe = $("#tour");
    iframe.attr("src", iframe.data("src"));
   });
});
</script>

This jquery is set up for use on two iframes (#homepage & #tour) that are controlled by each their own button (#button_homepage & #button_tour). Clicking on either of the buttons will load their corresponding iframes by taking the data-src attribute in the iframe and placing it in the src attribute, thereby loading the iframe.

Pretty nifty solution - let me know if you think it could be improved.