0

我目前正在开发一个托管/客户端 Blazor WebAssembly 应用程序，该应用程序在最初运行时运行良好。

在正在呈现的页面的“OnInitializedAsync”方法中是一个 javascript 调用，用于检索页面上 html 元素的宽度。如果我在 javascript 函数中设置断点，则在初始应用程序运行时，浏览器将显示呈现的页面并且元素属性被正确检索。但是，当我刷新浏览器页面时，当断点被击中时，浏览器还没有完成页面渲染，因此元素的宽度为零。

谁能告诉我这是为什么以及如何解决这个问题？

<div @ref="_carPanelWidth">
    ....
</div>

@code {

    private ElementReference _carPanelWidth;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var carPanelWidth = await JsRuntime.InvokeAsync<int>("utilityFunctions.getElementWidth", new object[] { _carPanelWidth });

        StateHasChanged();
    }
}

window.utilityFunctions = {

    getElementWidth: function (element) {
        return element.offsetWidth;
    }
};
4

1 回答 1

1

我在渲染网格时会处理类似的情况。它会导致看起来不专业的浮华。

我所做的是将 html 元素标记为隐藏，然后在我知道所有内容都已加载时显示它们。如果这是您遇到的问题，这完全消除了闪光。

<div id="table_id_div" style="visibility:hidden">

我使用 interopt 将 DataTable.com 的东西应用到表中，完成后 javascript 运行......

$("#" + tableName + "_div").attr('style', 'visibility : visible');

这似乎可以解决问题。

于 2019-10-15T19:17:58.097 回答