当 Blazor 中的页面更改时，Javascript 不起作用

Posted 2023-03-27

【中文标题】当 Blazor 中的页面更改时，Javascript 不起作用

【英文标题】：Javascript not working when page changes in Blazor

【发布时间】：2022-01-06 16:10:31

【问题描述】：

我正在 Blazor 中开发一个项目，但我遇到了 javascript 问题。

当我第一次编译项目时，它工作正常！

但是当我转到任何页面并返回时，滑块（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>

【问题讨论】：

打开浏览器开发人员窗口（通常按 F12）然后在控制台选项卡中查找错误以及在网络选项卡中查找丢失的文件会很有帮助。见：lifewire.com/web-browser-developer-tools-3988965

【参考方案1】：

如果我没记错的话，Blazor WASM 是在浏览器中下载和缓存的。这意味着下次您返回页面时，它不会再次被初始化。已经是了。

现在，如果您尝试使用 JavaScript，那么控制轮播将是一个问题。 我建议您尝试从 blazor 项目中清除所有 JS 并改用 C#。

对于轮播，https://blazorise.com/docs 有一个不错的。它运行完美。