Как сделать функцию javascript доступной после загрузки документа в Blazor? - PullRequest
Новая
       23

Как сделать функцию javascript доступной после загрузки документа в Blazor?

1 голос
/ 12 июля 2020

Без использования Blazor, 

<script>
    $(document).ready(function () {
        alert('hello')
        // what you want to initialize
    });
</script>

С Blazor, могу ли я просто поместить приведенный выше сценарий в wwwroot/index.html и вызвать его со страницы бритвы Blazor в методе OnInitializedAsync?

1 Ответ

2 голосов
/ 12 июля 2020

В приложении Blazor Server вы можете добавить тег скрипта (в файле _Host.cs html) в свой JavaScript файл следующим образом: 

 <script src="_framework/blazor.server.js"></script>
 <script src="exampleJsInterop.js"></script>

Ваш JS файл должен быть помещен в папка wwwroot

И вы можете вызывать свои JavaScript функции из пары OnAfterRender (Asyn c), как показано в следующем фрагменте кода: 

 @inject IJSRuntime JSRuntime

<div @ref="divElement">Text during render</div>

@code {
    private ElementReference divElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(
                "exampleJsInterop.setElementText", divElement, "Text after render");
        }
    }
}

Примечание. Приложение Blazor Server обычно выполняет предварительную отрисовку, JavaScript еще не доступно, поэтому вам нужно дождаться, пока ваше приложение будет отрисовано, и только затем вызывать функции JavaScript. Также обратите внимание, что приведенный выше код проверяет, отображается ли это приложение впервые ... это место, где вы должны инициализировать свой JavaScript объект.

Примечание. Вышеупомянутое не применимо к приложениям WebAssembly. , поскольку JavaScript доступен с самого начала.

В WebAssembly Apps вы должны поместить тег, который ссылается на ваш JavaScript файл, в wwwroot/index.html, например: 

<script src="_framework/blazor.webassembly.js"></script>
<script src="exampleJsInterop.js"></script>

Обратите внимание, что вам все равно нужно вызывать свои JavaScript функции из пары OnAfterRender (Asyn c).

Надеюсь, это поможет! Если вы застряли, дайте мне знать

...