當 Blazor 中的頁面更改時，Javascript 不起作用

Question

我正在 Blazor 開發一個項目，但我遇到了 javascript 的問題。

當我第一次編譯項目時，它工作正常！

但是當我 go 到任何頁面並返回時，滑塊（swiperjs）根本不起作用。 我還嘗試了其他輪播，例如： owlCarousel ，結果仍然不成功。 它僅在項目首次構建時有效，在頁面導航后無效。

我在等你的幫助:)

布局頁面：

@inherits LayoutComponentBase
@inject IJSRuntime Js
@code {
// OnAfterRenderAsync (I also tried this method)
    protected override async Task OnInitializedAsync()
    {
            await Js.InvokeVoidAsync("import", "https://unpkg.com/swiper/swiper-bundle.min.js");
            await Js.InvokeVoidAsync("import", "/custom/js/swiper.js");
             
    }
}

<div class="container">
   
    <div class="p-40">
        <h3>slider</h3>
        <a href="/">home</a> <a href="/home">page</a>
    </div>

    @Body
</div>

**I use a slider on my homepage:**

<div class="container">
<div class="row">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
            <div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
            <div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>
</div>

wwroot:index.hmtl

馬特克斯

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100|Poppins:300,400,700"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <style>.swiper { width: 100%; height: 100%; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } </style>

正在加載...

 <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss"></a> </div> <script src="_framework/blazor.webassembly.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="/custom/js/swiper.js"></script>

Answer 1

嘗試這個：

    protected override async Task OnAfterRenderAsync (bool firstRender)
    {
        if(firstRender)
{
            await Js.InvokeVoidAsync("import", "https://unpkg.com/swiper/swiper-bundle.min.js");
            await Js.InvokeVoidAsync("import", "/custom/js/swiper.js");
   }          
    }

Answer 2

如果我沒記錯的話，Blazor WASM 有點下載並緩存在瀏覽器中。 這意味着下次您 go 回到您的頁面時，它不會再次被初始化。 已經是了。

現在，如果您嘗試使用 JavaScript，那么控制旋轉木馬將是一個問題。 我建議您嘗試從 blazor 項目中清除所有 JS，並改用 C#。

對於旋轉木馬，在https://blazorise.com/docs上有一個不錯的。 它運行完美。

Answer 3

是的，這是一個解決方案，但為什么外部添加的 javascripts 不起作用。

它應該能夠在沒有准備好的組件的情況下工作，我們需要添加我們想要的庫。