Bootstrap vertical navpills only load iframe on click-CodePudding

I am currently working on a little layout on my website using Bootstrap's vertical nav pillls

  <div  id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a  id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
    <a  id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
    <a  id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
    <a  id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
  </div>
  <div  id="v-pills-tabContent">
    <div  id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div  id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div  id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div  id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>

The problem that I have however that 2 of these tabs are loading iframes and unfortunately they are really slowing down my overall loading times. Is there a method to load the iframe ONLY if a tab/pill containing an iframe is being triggered?

Some expert help would be greatly appreciated, thank you

CodePudding user response：

An iframe loads separately from the main page, so it shouldn't slow down the main page, unless there is a bandwidth constraint.

One solution could be to dynamically load the iframes only when they are needed. To do this you start with an iframe that has no src attribute:

<iframe data-src="/iframe_page1.php"></iframe>

here I store the wanted value of src in a data attribute. The when, for instance, the link for the messages is clicked, you can set the iframe src attribute:

$("#v-pills-messages-tab").on("shown.bs.tab", function() {
    let iframe = $(this);
    iframe.attr("src", iframe.data('src'));
});

That should then load the iframe.

I haven't actually tested this code, but I hope you understand the general idea?