使用 Blazor WASM，我想<span id="“”">在 window 打开时</span>显示浏览器 window 的尺寸

Question

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

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

我的 HTML 在 a.razor 文件中。 内容是：

@page "/termsAndConditions"
@inject IJSRuntime jsRuntime

    <body class="text-center">
        <span id="windowInnerWidth"></span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span id="windowInnerHeight"></span>

    </body>
        @code {

        }

我的 Javascript 在 a.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 首次打开时，我尝试了多种方法来显示 window 尺寸，包括：

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

没有任何效果。 谁能告诉我我做错了什么？

Answer 1

尝试这个：

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

更新（基于您编辑的问题）

在 your.js 文件中创建一个新的 function，如下所示：

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

并将其添加到您的.razor 文件中：

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

使用 Blazor WASM，我想<span id="“”">在 window 打开时</span>显示浏览器 window 的尺寸

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-12-04 06:51:08

使用 Blazor WASM，我想<span id="“”">在 window 打开时</span>显示浏览器 window 的尺寸

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-12-04 06:51:08

解决方案1
1 已采纳 2020-12-04 06:51:08