如何在Bootstrap中以模态视图打开远程外部页面？

我完全理解你的需求——不想新开标签/弹窗，也不想提前准备页面内容，就是要在Bootstrap的模态框里直接展示外部页面对吧？其实最直接可行的方案就是用iframe嵌入，把外部页面放到模态框的内容区域里，下面是具体的实现步骤：

实现代码示例 #

HTML结构

先准备触发按钮和Bootstrap模态框的基础结构，我们把外部页面的地址通过data-bs-url属性绑定到按钮上，方便后续动态获取：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#externalPageModal" data-bs-url="https://google.com">
  打开外部页面模态框
</button>

<!-- Bootstrap模态框容器 -->
<div class="modal fade" id="externalPageModal" tabindex="-1" aria-labelledby="externalPageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- 可替换为modal-xl/modal-sm调整尺寸 -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="externalPageModalLabel">外部页面预览</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 用于加载外部页面的iframe，初始为空 -->
        <iframe id="externalIframe" width="100%" height="600" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>

JavaScript逻辑

利用Bootstrap模态框的内置事件，在模态框显示时动态设置iframe的地址，隐藏时清空地址避免内存占用：

// 获取模态框元素
const externalModal = document.getElementById('externalPageModal');

// 监听模态框即将显示的事件
externalModal.addEventListener('show.bs.modal', function (event) {
  // 获取触发模态框的按钮
  const triggerBtn = event.relatedTarget;
  // 从按钮的data属性中拿到外部页面地址
  const targetUrl = triggerBtn.getAttribute('data-bs-url');
  // 获取iframe元素并设置src
  const iframe = document.getElementById('externalIframe');
  iframe.src = targetUrl;
});

// 监听模态框隐藏的事件，清空iframe的src
externalModal.addEventListener('hidden.bs.modal', function () {
  const iframe = document.getElementById('externalIframe');
  iframe.src = '';
});

重要注意事项 #

• 跨域安全限制：很多网站（比如Google）会设置X-Frame-Options响应头，禁止被其他网站嵌入到iframe中，这时候模态框里会显示无法加载的页面。这是浏览器的安全机制，没有办法绕过，只能选择允许被嵌入的外部页面使用这种方式。
• 你可以根据需求调整模态框的尺寸（比如modal-xl）和iframe的高度，让展示效果更适配页面内容。
• 如果需要打开多个不同的外部页面，只需要给不同的触发按钮设置不同的data-bs-url值即可，上面的脚本会自动处理。

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