Blazor WASM门户加载外部Razor页面实现方案咨询

针对你的需求，以下是两种贴合预期的实现方案，无需整页刷新或YARP代理，能保持门户URL和头部菜单的稳定性：

方案一：IFrame组件+跨域路由同步（最接近原生iframe效果） #

直接使用Blazor的IFrame组件加载外部页面，通过跨域消息通信同步门户与外部页面的路由状态，确保URL与内容一致。

1. 门户端实现 #

创建对应路由的组件（如Integration1.razor），负责加载外部页面并处理路由同步：

@page "/integration1"
@inject NavigationManager NavManager
@implements IAsyncDisposable
@inject IJSRuntime JS

<iframe @ref="iframeElement" 
        src="https://ourcompanyintegrationapp.azurewebsites.net/" 
        style="width: 100%; height: calc(100vh - 80px); border: none;"
        onload="syncInitialRoute()"></iframe>

@code {
    private ElementReference iframeElement;
    private DotNetObjectReference<Integration1>? _dotNetRef;

    protected override void OnInitialized()
    {
        _dotNetRef = DotNetObjectReference.Create(this);
        // 注册跨域消息监听
        JS.InvokeVoidAsync("setupIframeMessageHandler", _dotNetRef);
    }

    [JSInvokable]
    public void SyncPortalUrl(string externalPath)
    {
        // 更新门户URL，不触发整页刷新
        NavManager.NavigateTo($"/integration1{externalPath}", forceLoad: false);
    }

    // 门户路由变化时同步到iframe
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            var currentPath = NavManager.Uri.Replace(NavManager.BaseUri, "/");
            JS.InvokeVoidAsync("syncRouteToIframe", iframeElement, currentPath);
        }
    }

    public async ValueTask DisposeAsync()
    {
        _dotNetRef?.Dispose();
        await JS.InvokeVoidAsync("removeIframeMessageHandler");
    }
}

添加配套JS工具（wwwroot/js/iframe-sync.js）：

let _dotNetRef;

export function setupIframeMessageHandler(ref) {
    _dotNetRef = ref;
    window.addEventListener('message', handleExternalMessage);
}

export function removeIframeMessageHandler() {
    window.removeEventListener('message', handleExternalMessage);
}

function handleExternalMessage(event) {
    // 仅处理信任的外部域消息
    if (event.origin !== 'https://ourcompanyintegrationapp.azurewebsites.net') return;
    
    if (event.data.type === 'routeUpdate') {
        _dotNetRef.invokeMethodAsync('SyncPortalUrl', event.data.path);
    }
}

export function syncRouteToIframe(iframe, path) {
    iframe.contentWindow.postMessage(
        { type: 'syncPortalRoute', path: path },
        'https://ourcompanyintegrationapp.azurewebsites.net'
    );
}

2. 外部应用端配置 #

在外部Razor页面项目中添加路由同步逻辑，监听自身路由变化并通知门户：

// 监听路由变化（适配Blazor应用）
window.addEventListener('popstate', sendRouteUpdateToPortal);

// Blazor应用可通过NavigationManager的LocationChanged事件触发
function sendRouteUpdateToPortal() {
    const currentPath = window.location.pathname + window.location.search;
    window.parent.postMessage(
        { type: 'routeUpdate', path: currentPath },
        'https://portal.ourcompany.com'
    );
}

// 接收门户的路由同步指令
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://portal.ourcompany.com') return;
    
    if (event.data.type === 'syncPortalRoute') {
        // 更新外部应用路由，不刷新页面
        window.history.pushState({}, '', event.data.path);
        // Blazor应用可调用NavigationManager.NavigateTo完成内部路由跳转
        DotNet.invokeMethodAsync('YourExternalAppNamespace', 'NavigateTo', event.data.path);
    }
});

关键配置注意事项 #

• 跨域Cookie：OAuth2认证Cookie需设置为SameSite=None; Secure，确保跨域iframe能携带认证状态，同时外部应用需配置CORS允许门户域名。
• 消息来源验证：必须严格校验event.origin，防止恶意跨域消息攻击。
• 样式适配：iframe高度需扣除门户头部/菜单高度，避免页面滚动冲突。

方案二：远程Razor组件加载（需外部项目适配） #

如果外部项目可将功能拆分为独立Razor组件，可利用.NET的远程组件加载能力，直接将外部组件嵌入门户容器：

1. 外部项目配置 #

将需要共享的Razor页面拆分为RCL（Razor类库），发布为可访问的组件包或直接托管组件DLL。

2. 门户端加载组件 #

通过LazyAssemblyLoader动态加载外部组件：

@page "/integration1"
@inject LazyAssemblyLoader AssemblyLoader

@if (_remoteComponent is not null)
{
    <div style="height: calc(100vh - 80px);">
        @_remoteComponent
    </div>
}

@code {
    private RenderFragment? _remoteComponent;

    protected override async Task OnInitializedAsync()
    {
        // 加载外部组件所在的程序集
        var assemblies = await AssemblyLoader.LoadAssembliesAsync(new[]
        {
            "https://ourcompanyintegrationapp.azurewebsites.net/_content/YourRemoteComponentLib/YourRemoteComponentLib.dll"
        });

        // 渲染远程组件
        _remoteComponent = builder =>
        {
            var componentType = assemblies.First().GetType("YourRemoteComponentLib.IntegrationPage");
            builder.OpenComponent(0, componentType);
            builder.CloseComponent();
        };
    }
}

此方案更接近原生Blazor体验，但要求外部项目进行组件化改造，适合长期维护的集成场景。

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