Bootstrap垂直Nav Pills实现点击标签页时才加载iframe

当然可以实现！核心思路是先不设置iframe的src属性，而是把真实地址存在自定义属性里，等对应标签页被激活（首次点击）时，再动态给iframe赋值src，这样就不会在页面初始加载时就加载所有iframe内容。

步骤1：修改HTML结构 #

把包含iframe的标签页里的iframe，将src替换成data-src（自定义属性）来存储真实地址，示例如下：

<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>
  <!-- 带iframe的标签页，用data-src存真实地址 -->
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
    <iframe data-src="https://example.com/profile" width="100%" height="600" frameborder="0"></iframe>
  </div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <!-- 另一个带iframe的标签页 -->
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
    <iframe data-src="https://example.com/settings" width="100%" height="600" frameborder="0"></iframe>
  </div>
</div>

步骤2：添加JavaScript逻辑 #

利用Bootstrap的shown.bs.tab事件（标签页切换完成后触发），动态加载对应iframe的内容：

// 监听标签页切换完成事件
$('#v-pills-tab a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
  // 获取当前激活的标签页ID
  const targetTabId = $(e.target).attr('href');
  // 找到该标签页内带data-src的iframe
  const iframe = $(targetTabId).find('iframe[data-src]');
  
  // 仅当iframe未加载过时，赋值src属性
  if (iframe.length && !iframe.attr('src')) {
    iframe.attr('src', iframe.attr('data-src'));
    // 移除data-src属性，避免重复处理
    iframe.removeAttr('data-src');
  }
});

// 页面初始化时，处理默认激活的标签页（如果里面有iframe）
$(document).ready(function() {
  const activeTab = $('.tab-pane.active');
  const activeIframe = activeTab.find('iframe[data-src]');
  if (activeIframe.length) {
    activeIframe.attr('src', activeIframe.attr('data-src'));
    activeIframe.removeAttr('data-src');
  }
});

补充说明 #

• 此方案仅在用户首次点击对应标签页时加载iframe内容，大幅降低页面初始加载的请求量和耗时。
• 后续切换已加载过的标签页时，iframe不会重复加载（除非手动刷新页面）。
• 若使用Bootstrap 5，只需将HTML中的data-toggle替换为data-bs-toggle，JavaScript事件逻辑无需改动。

内容的提问来源于stack exchange，提问作者dss