Bootstrap模态框触发时父页面自动滚动至iframe的禁用方法咨询

我有一个嵌入了iframe的页面，该iframe指向使用Bootstrap v5.1的外部站点。该Bootstrap页面会在加载完成时和点击特定按钮时弹出模态框，此时父页面会自动滚动至iframe所在位置，跳过顶部所有内容。按钮触发时的该行为尚可接受，但页面加载时的此行为不符合预期，请问是否有方法禁用Bootstrap中模态框触发时的自动滚动？

主页面iframe代码 #

<div id="header">
    <!-- lots of content here -->
</div>
<div id="content">
    <div>
        <!-- lots of content here -->
    </div>
    <div id="my-container">
        <iframe src="https://contoso.com" id="myIframe" frameborder="0"></iframe>
    </div>
</div>

Bootstrap页面模态框代码 #

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="modal-header">
                    <h5 class="modal-title" id="PopupTitle">Test Popup</h5>
                </div>
                <div class="d-flex flex-column text-center">
                    <div class="control-wrapper">
                        <input type="text" maxlength="10" autocomplete="off" class="form-control input-lg" name="myID" id="myID" placeholder="Enter ID" />
                    </div>
                    <div class="control-wrapper">
                        <input type="text" autocomplete="off" class="form-control input-lg" name="description" id="description" placeholder="Description" />
                    </div>
                    <div class="modal-footer">
                        <div><button type="button" id="searchButton" class="btn btn-primary">Search</button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这个问题的核心原因是Bootstrap模态框默认会在打开时将焦点转移到模态框元素上，而iframe作为嵌入的外部页面，焦点转移会触发父页面自动滚动到iframe所在位置。针对页面加载时的异常滚动，可通过以下几种方式解决：

方法1：仅拦截页面加载触发的焦点行为（推荐） #

通过监听模态框的show.bs.modal事件，只在页面首次加载触发模态框时阻止默认焦点设置，保留按钮触发时的原有行为。在外部Bootstrap页面的JS代码中添加：

// 标记是否为页面加载触发的模态框
let isLoadTriggered = true;

// 监听模态框显示前事件
document.getElementById('loginModal').addEventListener('show.bs.modal', function(e) {
    if (isLoadTriggered) {
        // 阻止默认焦点设置逻辑
        e.preventDefault();
        // 手动触发模态框显示
        this.classList.add('show');
        document.body.classList.add('modal-open');
        // 手动添加模态框背景层
        const backdrop = document.createElement('div');
        backdrop.className = 'modal-backdrop fade show';
        document.body.appendChild(backdrop);
        // 重置标记，确保按钮触发时行为正常
        isLoadTriggered = false;
    }
});

// 页面加载完成后弹出模态框
window.addEventListener('load', function() {
    const modal = new bootstrap.Modal(document.getElementById('loginModal'));
    modal.show();
});

方法2：全局禁用模态框自动焦点 #

如果不需要模态框的自动焦点功能，可以在初始化模态框时关闭该配置，但此方法会同时禁用按钮触发时的焦点行为：

// 初始化模态框时关闭自动焦点
const modal = new bootstrap.Modal(document.getElementById('loginModal'), {
    focus: false
});
modal.show();

方法3：父页面层面兜底修复 #

如果无法修改外部Bootstrap页面代码，可在父页面监听iframe加载事件，强制恢复原滚动位置：

const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    // 记录当前滚动位置
    const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
    // 短暂延迟后恢复滚动位置（抵消模态框触发的滚动）
    setTimeout(() => {
        window.scrollTo(0, scrollPos);
    }, 100);
});

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