JavaScript onload修改innerHTML后内容瞬间恢复的问题求助

我用这段JavaScript代码修改页面标题元素的innerHTML：

window.addEventListener("onload", function (e) {
    console.log("Hit Javascript file");
    if (this.document.getElementById('cardHeader')) {
        document.getElementById('cardHeader').innerHTML = "Card Header Text";
    }
});

修改后的内容仅显示约半秒就恢复为原始值。我尝试过给script标签加defer属性，也将script标签放在header、body内部及外部，问题仍未解决。我的布局HTML中引入脚本的位置如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
 
    <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>


<body>
    @RenderBody()

    <script src="https://mysitehere.azurewebsites.net/login-script.js" defer></script>
</body>

</html>

从布局代码里的<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />和@RenderBody()可以判断，这是Blazor Server（ServerPrerendered模式）项目。问题根源在于：

1. 预渲染阶段：服务器先渲染出cardHeader的原始内容并发送到浏览器
2. 你的JS在window.onload触发后修改了内容，但此时Blazor的客户端连接已建立，客户端Blazor会重新渲染组件，覆盖掉你修改的内容，导致显示后又恢复原始值。

针对Blazor Server场景，提供三种解决方式：

方式1：用Blazor组件生命周期修改（推荐） #

既然是Blazor项目，直接在对应Razor组件内修改内容，无需原生JS。找到包含cardHeader的组件，重写OnAfterRenderAsync方法：

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 更新绑定的标题变量
            CardHeaderText = "Card Header Text";
            StateHasChanged();
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private string CardHeaderText = "原始标题";
}

然后在组件的HTML部分绑定该变量：

<div id="cardHeader">@CardHeaderText</div>

方式2：监听Blazor的blazorAfterRender事件（原生JS方案） #

如果必须用原生JS，要等Blazor完成客户端渲染后再修改，而不是依赖window.onload。修改你的JS代码：

// 标记是否已修改过标题，避免重复执行
let hasUpdatedHeader = false;

// 监听Blazor完成渲染的事件
document.addEventListener('blazorAfterRender', function () {
    if (!hasUpdatedHeader) {
        const cardHeader = document.getElementById('cardHeader');
        if (cardHeader) {
            cardHeader.innerHTML = "Card Header Text";
            hasUpdatedHeader = true;
        }
    }
});

方式3：禁用服务器预渲染（不推荐） #

如果不需要预渲染，可以将组件的render-mode改为Server：

<component type="typeof(HeadOutlet)" render-mode="Server" />

但这种方式会降低首屏加载速度，不建议随意使用。

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