当 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 不起作用。

它应该能够在没有准备好的组件的情况下工作，我们需要添加我们想要的库。