Bootstrap 引导垂直导航仅在单击时加载iframe

oug3syen 于 2022-12-20 发布在 Bootstrap

关注(0)|答案(1)|浏览(168)

我目前正在我的网站上使用Bootstrap的垂直导航药丸的小布局

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="nav-link active" 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 class="nav-link" 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 class="nav-link" 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 class="nav-link" 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 class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>

问题是，我有2个标签加载iframe，不幸的是，他们真的拖慢了我的整体加载时间。是否有一个方法来加载iframe只有当标签/药丸包含iframe被触发？
我们将非常感谢Maven的帮助，谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/74840073/bootstrap-vertical-navpills-only-load-iframe-on-click

1条答案

按热度按时间

qmb5sa221#

iframe独立于主页面加载，因此它不会降低主页面的速度，除非存在带宽限制。
一种解决方案是只在需要的时候动态加载iframe，为此，我们从一个没有src属性的iframe开始：

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

在这里，我将src的所需值存储在data attribute中。例如，当单击消息的链接时，您可以设置iframe src属性：

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

这应该会加载iframe。
我还没有实际测试过这段代码，但我希望你能理解其中的大意。

赞(0）回复(0）举报 2022-12-20

我来回答

Bootstrap 引导垂直导航仅在单击时加载iframe

1条答案

相关问题

热门标签

最新问答