Blazor Server调用JS开新标签页遭Chrome弹窗拦截问题求助

核心结论 #

没办法绕过Chrome的弹窗拦截机制——这是浏览器为防范恶意弹窗设置的安全规则，只有用户主动交互（如点击、键盘操作）触发的窗口打开操作才会被允许，非交互触发的异步/自动操作都会被拦截（Edge的规则相对宽松，但也不保证长期有效）。

可行解决方法 #

1. 直接绑定用户点击事件

把打开窗口的逻辑直接放在用户点击的回调中，确保操作处于用户交互上下文内：

[Inject]
private IJSRuntime JSRuntime { get; set; } = null!;

// 提前获取PaymentWindowUrl，避免在点击后异步请求脱离交互上下文
private string PaymentWindowUrl = "你的目标地址";

private async Task OpenPaymentWindow()
{
    await JSRuntime.InvokeVoidAsync("open", PaymentWindowUrl, "_blank");
}

对应的Razor组件代码：

<button @onclick="OpenPaymentWindow">打开支付窗口</button>

2. 先开空白窗口，异步完成后跳转

如果必须先执行异步操作（比如调用后端接口获取支付URL），可以先在用户点击时打开空白窗口，等异步操作完成后再修改窗口地址：

[Inject]
private IJSRuntime JSRuntime { get; set; } = null!;
private IJSObjectReference? _blankWindow;

private async Task InitiatePayment()
{
    // 用户点击时打开空白窗口，属于合法交互触发
    _blankWindow = await JSRuntime.InvokeAsync<IJSObjectReference>("open", "", "_blank");
    
    try
    {
        // 执行异步逻辑，比如获取支付URL
        var paymentUrl = await FetchPaymentUrlFromBackend();
        
        // 跳转至目标地址
        await _blankWindow.InvokeVoidAsync("location.href", paymentUrl);
    }
    catch (Exception ex)
    {
        // 出错时关闭空白窗口
        await _blankWindow.InvokeVoidAsync("close");
        // 这里可以添加错误提示逻辑
    }
}

// 组件销毁时清理资源
public async ValueTask DisposeAsync()
{
    if (_blankWindow != null)
    {
        await _blankWindow.DisposeAsync();
    }
}

为什么之前的a标签触发click无效 #

通过JS代码模拟的click()不属于用户真实主动交互，Chrome依然会判定为自动弹窗并拦截，只有用户手动点击a标签本身才会被允许。

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