Blazor动态值传递问题：页面与布局间状态同步失效

你的核心问题是Blazor的Scoped服务在iframe环境下无法共享实例：布局页面和iframe中的clientaddedit页面属于两个独立的Blazor运行上下文，各自拥有独立的overlayService实例，因此iframe内修改的状态无法同步到布局页面的服务实例中。

以下是两种可行的跨iframe状态同步方案：

方案1：利用浏览器本地存储（LocalStorage）同步 #

通过LocalStorage存储状态，并监听存储变化事件实现跨上下文同步。

1. 修改OverlayService服务类 #

public class OverlayService
{
    private const string StorageKey = "IsDivVisible";
    public event Action<bool> IsDivVisibleChanged;
    
    public bool IsDivVisible
    {
        get
        {
            var storedValue = await _localStorage.GetItemAsync<string>(StorageKey);
            return !string.IsNullOrEmpty(storedValue) && bool.Parse(storedValue);
        }
        set
        {
            await _localStorage.SetItemAsync(StorageKey, value.ToString());
            IsDivVisibleChanged?.Invoke(value);
        }
    }

    private readonly ILocalStorageService _localStorage;

    public OverlayService(ILocalStorageService localStorage)
    {
        _localStorage = localStorage;
    }
}

注：需引入Blazored.LocalStorage NuGet包简化LocalStorage操作，也可自行通过JS Interop实现基础读写。

2. 布局页面监听存储变化 #

private bool isDivVisible;
private readonly OverlayService _overlayService;
private readonly IJSRuntime _jsRuntime;

public YourLayoutComponent(OverlayService overlayService, IJSRuntime jsRuntime)
{
    _overlayService = overlayService;
    _jsRuntime = jsRuntime;
}

protected override async Task OnInitializedAsync()
{
    isDivVisible = _overlayService.IsDivVisible;
    // 注册LocalStorage变化监听
    await _jsRuntime.InvokeVoidAsync("setupStorageListener", DotNetObjectReference.Create(this));
}

[JSInvokable]
public void OnStorageUpdated(bool newValue)
{
    isDivVisible = newValue;
    InvokeAsync(StateHasChanged);
}

配套全局JS代码（放在布局页面的<script>标签中）：

function setupStorageListener(dotNetRef) {
    window.addEventListener('storage', (event) => {
        if (event.key === 'IsDivVisible') {
            dotNetRef.invokeMethodAsync('OnStorageUpdated', event.newValue === 'true');
        }
    });
}

3. ClientAddEdit页面修改状态 #

private void ShowRenameClient()
{
    renameClient_Div = true;
    _overlayService.IsDivVisible = true;
    InvokeAsync(StateHasChanged);
}

private void HideRenameClient()
{
    renameClient_Div = false;
    _overlayService.IsDivVisible = false;
    InvokeAsync(StateHasChanged);
}

方案2：JS Interop直接通知父页面 #

若iframe与父页面在同一域名下，可直接通过JS调用父页面方法传递状态。

1. ClientAddEdit页面触发状态通知 #

private readonly IJSRuntime _jsRuntime;
private readonly OverlayService _overlayService;

public ClientAddEditPage(IJSRuntime jsRuntime, OverlayService overlayService)
{
    _jsRuntime = jsRuntime;
    _overlayService = overlayService;
}

private void ShowRenameClient()
{
    renameClient_Div = true;
    _overlayService.IsDivVisible = true;
    // 通知父页面更新状态
    _jsRuntime.InvokeVoidAsync("window.parent.updateDivVisibility", true);
    InvokeAsync(StateHasChanged);
}

private void HideRenameClient()
{
    renameClient_Div = false;
    _overlayService.IsDivVisible = false;
    _jsRuntime.InvokeVoidAsync("window.parent.updateDivVisibility", false);
    InvokeAsync(StateHasChanged);
}

2. 布局页面接收状态更新 #

private bool isDivVisible;
private DotNetObjectReference<YourLayoutComponent>? _dotNetRef;
private readonly IJSRuntime _jsRuntime;

public YourLayoutComponent(IJSRuntime jsRuntime)
{
    _jsRuntime = jsRuntime;
}

protected override void OnInitialized()
{
    _dotNetRef = DotNetObjectReference.Create(this);
    // 向JS注册组件引用
    _jsRuntime.InvokeVoidAsync("registerLayoutRef", _dotNetRef);
}

[JSInvokable]
public void UpdateDivVisibility(bool isVisible)
{
    isDivVisible = isVisible;
    InvokeAsync(StateHasChanged);
}

public void Dispose()
{
    _dotNetRef?.Dispose();
}

配套全局JS代码（放在布局页面的<script>标签中）：

let layoutDotNetRef;
function registerLayoutRef(ref) {
    layoutDotNetRef = ref;
}

window.updateDivVisibility = function(isVisible) {
    layoutDotNetRef.invokeMethodAsync('UpdateDivVisibility', isVisible);
}

注意事项 #

• 确保iframe与父页面处于同一域名，否则浏览器同源策略会限制跨上下文通信。
• 不要尝试将服务改为Singleton模式，Singleton仅在单个Blazor应用上下文内有效，无法跨iframe共享。

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