如何在Bootstrap 5模态框中通过iframe传递动态ID加载指定页面

AI 小北

2026-7-14

解决方案

方法一：利用Bootstrap模态框原生事件（纯JS）

无需修改现有按钮结构，直接通过监听Bootstrap模态框的show.bs.modal事件实现：

给iframe添加ID：修改模态框内的iframe标签，增加唯一ID方便定位：

<div class="modal-body">
    <iframe id="newsIframe" src="QuickView.aspx?id=3"></iframe>
</div>

添加JavaScript逻辑：在页面底部（或外部JS文件）加入以下代码：

// 获取模态框DOM元素
const modal = document.getElementById('exampleModal');

// 监听模态框即将显示的事件
modal.addEventListener('show.bs.modal', function(event) {
    // 获取触发模态框的按钮
    const triggerBtn = event.relatedTarget;
    // 提取按钮的data-id值
    const newsId = triggerBtn.getAttribute('data-id');
    // 获取iframe元素
    const iframe = this.querySelector('#newsIframe');
    // 更新iframe的src属性，传入对应新闻ID
    iframe.src = `QuickView.aspx?id=${newsId}`;
});

方法二：jQuery版本（若项目已引入jQuery）

如果项目使用了jQuery，可用更简洁的代码实现：

同样给iframe添加ID（同方法一第一步）
添加jQuery代码：

$('#exampleModal').on('show.bs.modal', function(event) {
    // 获取触发按钮的data-id
    const newsId = $(event.relatedTarget).data('id');
    // 更新iframe的src
    $(this).find('#newsIframe').attr('src', `QuickView.aspx?id=${newsId}`);
});