Load iframe when user clicks on modal

Question

I have a page within my website which has about 60 iframe elements inside it. These iframes are contained within w3-modals divs but are all being loaded as soon as the page loads, causing the page to load very slowly. Is it possible when a user clicks on the button to load the w3-modal that they iframe can be loaded then to help page load time.

Any help would be much appreciated with this! But if possible please keep it simple as I am new to coding.

Thanks very much!

Here is the code Im using:

Button to load modal

<button onclick="document.getElementById('id03').style.display='block'" class="w3-btn w3-light-blue">Instruction</button>

Modal code

<div id="id03" class="w3-modal">
      <iframe src="http://" frameborder="0" height="700px" style="width: 800px">

I think [this](http://stackoverflow.com/questions/7177080/how-do-i-load-an-url-in-iframe-with-jquery) will help you. That issue looks like same. — Arumuga Raja, Mar 14 '16 at 14:34

score 0 · Answer 1 · answered Mar 14 '16 at 15:42

I think your are taking this to the incorrect way. Loading 60 different pages is crazy, and for sure your computer and browser are suffering with this.

I think a better approach would be (as you said) loading your iframes as they are requested. I'm assuming that all your iframes are hidden (and you are using this modal system), so we could do something like this:

<button class="w3-btn w3-light-blue" data-open-modal="id03">Instruction</button>
<div id="id03" class="w3-modal" data-url="your-iframe-url"></div>

You first defined a button with the data-attribute data-open-modal which indicate that this button will open a modal. Next, you have your modal div with data-url defining the URL to use in the iframe. So, this is the JavaScript to do the trick (with jQuery, sorry no time of vanilla):

// We find all the buttons 'data-open-modal'
$('[data-open-modal]').click(function (e) {
    // We get the ID of the modal to open
    var modalId = $(this).data('open-modal');
    // We set a modal reference (shortcut)
    var $modal = $(modalId);
    // We get the iframe URL from the modal data-url
    var iframeURL = $modal.data('url');
    // We show the modal
    $modal.display(); // display: block;
    // We create the iframe inside using the URL
    $modal.append('<iframe src="' + iframeURL + '" frameborder="0" height="700px" style="width: 800px">');
    // We bind a click event when the user clicks on the "X" to close the modal and whe delete the iframe
    $modal.find('.w3-closebtn').on('click', function (e) {
        $modal.find('iframe').remove(); // Delete the iframe
    });
});

I haven't tested this code, but it should work!

score 0 · Answer 2 · edited Mar 15 '16 at 01:02

0

var your_source = $('#source').val();
$("#button").click(function () { 
      $("iframe").attr("src", your_source);
});

edited Mar 15 '16 at 01:02

Adam Katz

14,455
5
68
83

answered Mar 14 '16 at 16:27

Umair Khan

283
3
13

Please describe what this is doing and why you chose to do it in this manner so you can help educate your readers. – Adam Katz Mar 15 '16 at 01:01

Load iframe when user clicks on modal

2 Answers2