使用 Blazor WASM，我想在窗口打开时以 <span id= " " >显示浏览器窗口的尺寸

该解决方案是使用Blazor WASM模板构建的。当窗口大小调整正常时，我可以显示窗口尺寸。

当窗口打开时，我看不到如何显示窗口尺寸。

我的HTML在.rarzor文件中。内容为：

@page "/termsAndConditions"
@inject IJSRuntime jsRuntime
<body class="text-center">
<span id="windowInnerWidth"></span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span id="windowInnerHeight"></span>
</body>
@code {
}

我的Javascript在一个.js文件中。该文件包含以下运行良好的代码：

//Display browser window dimensions as they change
window.addEventListener("resize", function () {
document.getElementById("windowInnerWidth").innerHTML = "Width of inner window is: " + window.innerWidth;
});
window.addEventListener("resize", function () {
document.getElementById("windowInnerHeight").innerHTML = "Height of inner window is:&nbsp;" + window.innerHeight;
});

当窗口第一次打开时，我尝试了许多显示窗口尺寸的方法，包括：

window.addEventListener("open", function () {
document.getElementById("windowInnerWidth").innerHTML = "Width of inner window is: " + window.innerWidth;
});

什么都不管用。有人能告诉我我做错了什么吗？

试试这个：

window.addEventListener("load", function () {
document.getElementById("windowInnerWidth").innerHTML = "Width of inner window is: " + window.innerWidth;
});

更新(基于您编辑的问题(

在.js文件中创建一个新函数，如下所示：

function windowLoaded() {
document.getElementById("windowInnerWidth").innerHTML = "Width of inner window is: " + window.innerWidth;
}

并将其添加到你的.rarzor文件中：

@code {
protected override Task OnAfterRenderAsync(bool firstRender)
{
jsRuntime.InvokeVoidAsync("windowLoaded");
return base.OnAfterRenderAsync(firstRender);
}
}

相关内容

最新更新

热门标签：