如何在Razor Pages的模态窗口中跳转至外部网站？

问题原因分析 #

1. 相对路径解析错误：你使用的www.google.com是相对路径，浏览器会将其拼接在当前站点域名后（比如你的站点是https://localhost:5000，最终会跳转至https://localhost:5000/www.google.com），而非目标外部网站。
2. 模态框关闭事件干扰：data-bs-dismiss="modal"触发Bootstrap模态框关闭逻辑时，部分场景下会阻断锚点的默认跳转行为。
3. JavaScript语法错误：window.location.replace = "www.google.com"是错误写法，replace是方法需调用执行，且同样缺少协议头导致路径错误。

解决方案 #

方案1：修正锚点标签的路径与跳转逻辑 #

将锚点href改为带完整协议的绝对路径，同时优化模态框关闭与跳转的顺序：

基础写法（直接跳转）

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="display: flex; justify-content:center;">
                <h5 class="modal-title" id="exampleModalLongTitle">Tittle of modal</h5>
            </div>
            <div class="modal-body d-flex justify-content-center">
               custom text
            </div>
            <div class="modal-footer">
                <!-- 补充https://协议头，指定绝对路径 -->
                <a href="https://www.google.com" class="btn btn-secondary">RedirectTOGoGle</a>
            </div>
        </div>
    </div>
</div>

先关模态框再跳转（避免动画冲突）

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <!-- 模态框其他结构不变 -->
    <div class="modal-footer">
        <a href="javascript:void(0);" class="btn btn-secondary" onclick="handleModalRedirect()">RedirectTOGoGle</a>
    </div>
</div>

<script>
function handleModalRedirect() {
    // 获取模态框实例并关闭
    const modal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
    modal.hide();
    // 延迟跳转确保关闭动画完成
    setTimeout(() => {
        window.location.href = "https://www.google.com";
    }, 300);
}
</script>

方案2：修正JavaScript跳转代码 #

使用正确的方法调用和完整路径：

// 方法1：使用replace替换当前页面历史记录
window.location.replace("https://www.google.com");

// 方法2：直接修改页面href跳转
window.location.href = "https://www.google.com";

关键注意事项 #

• 所有外部跳转必须使用带http/https协议的绝对路径，避免浏览器解析为当前站点的相对路径。
• 若需结合模态框关闭逻辑，优先通过Bootstrap模态框API手动控制关闭，再执行跳转，避免事件冲突。

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