Control when an Iframe is loaded on a webflow site

Hi Community -

I am stuck on a particular issue with my webflow site.

The main site I am building will have a number of iframes linking to interactive HTML5 content. I want to have one iframe load automatically, and then control the loading of the other ifames with “tap to load” buttons. The iframe content can be quite data-heavy, so having them all load automatically when the page loads bogs down the user experience.

I have put together a tester site to show two simple iframes. I want the top iframe to load automatically, and I want the bottom iframe to load only when the “tap to load” text block is tapped. I think I have the interactions for the said text block wired correctly (suggestions for making it better are welcome).

This functionality is a pretty important part of having my webflow site mobile friendly and not a data-hog. Any help on how to configure this functionality would be greatly appreciated!


Here is my public share link: LINK
(how to access public share link)

2 Likes

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.

4 Likes

@Peter_Grant
Is there a way to do tis with classes instead of Id’s. I have 2 buttons that do the same thing.

Dennis