在 Blazor 服务器端运行 JavaScript 库 (Looper) - 某些 JavaScript 代码未运行

如何解决在 Blazor 服务器端运行 JavaScript 库 (Looper) - 某些 JavaScript 代码未运行

我正在尝试将 Looper 主题实现到我的 blazor 服务器端应用程序，并且我在 _Host.cshtml 的末尾引用了 javascript 库。但是，theme.min.js 中的某些脚本没有运行。为什么？

    <script src="/Library/vendor/jquery/jquery.min.js"></script>
    <script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
    <script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/Library/vendor/pace-progress/pace.min.js"></script>
    <script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
    <script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="/Library/javascript/theme.min.js"></script>
    <script src="_framework/blazor.server.js"></script>

我的问题是，虽然

    <div data-toggle="drowndown"></div> works,but hamburger menu toggle 
<button class="hamburger hamburger-squeeze mr-2" type="button" data-toggle="aside-menu" aria-label="toggle aside menu"><span class="hamburger-Box"><span class="hamburger-inner"></span></span></button>

不起作用。我在这里缺少什么？我究竟做错了什么？我的主题更改脚本也没有运行。如果我单步执行 theme.js 并且可以看到该脚本在 blazor 未处于活动状态时运行（注释掉 blazor.js）但在 blazor 处于活动状态时，该脚本不会运行。

(line 610) in /library/javascript/theme.js
},{
    key: "toggleAside",value: function toggleAside() {
      var _this4 = this;

      var $trigger = $('[data-toggle="aside"]');
      $trigger.on('click',function () {
        var isShown = $('.app-aside').hasClass('show');
        $trigger.toggleClass('active',!isShown);
        if (isShown) _this4.hideAside();else _this4.showAside();
      });
    }

我有根据的猜测是 theme.js 正在使用 blazor 不允许的东西？是否有人对 Looper 主题（或一般使用 javascript）有足够的经验知道为什么它不起作用？特别是汉堡切换和主题切换代码

    (line 1992 in /library/javascript/theme.js)
var Looper = function () {
  var Looper = new Theme(); // toggle skin thought button

  $('[data-toggle="skin"]').on('click',function (e) {
    e.preventDefault();
    var skin = Looper.skin === 'dark' ? 'default' : 'dark';
    Looper.setSkin(skin); // we need to refresh our page after change the skin

    location.reload();
  }).each(function () {
    var isDarkSkin = Looper.skin === 'dark';
    var $icon = $(this).find('.fa-moon');

    if (isDarkSkin) {
      $icon.addClass('far');
      $icon.removeClass('fas');
    }
  }); // make it global

  return Looper;
}();

这是网站 https://worshipground.azurewebsites.net/ 您可以使用检查器工具查看是否已正确加载 blazor 并且所有 javascript 文件都已加载到 /library/javascript 和 /library/vendor/...

    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- required Meta tags -->
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <!-- End required Meta tags -->


    <title> Starter Template | Looper - Bootstrap 4 Admin Theme </title>
    <base href="~/" />
    <Meta name="theme-color" content="#3063A0">
    <link rel="apple-touch-icon" sizes="144x144" href="Library/apple-touch-icon.png">
    <link rel="shortcut icon" href="Library/favicon.ico">


    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet">
    <link rel="stylesheet" href="/Library/vendor/open-iconic/font/css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="/Library/vendor/fontawesome/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="/Library/stylesheets/theme.min.css" data-skin="default">
    <link rel="stylesheet" href="/Library/stylesheets/theme-dark.min.css" data-skin="dark">
    <link rel="stylesheet" href="/Library/stylesheets/custom-app.css">
    <link rel="stylesheet" href="/Library/stylesheets/custom.css" data-skin="default">
    <link rel="stylesheet" href="/Library/stylesheets/custom-dark.css" data-skin="dark">
    <script>
        var skin = localStorage.getItem('skin') || 'default';
        var isCompact = JSON.parse(localStorage.getItem('hasCompactMenu'));
        var disabledSkinStylesheet = document.querySelector('link[data-skin]:not([data-skin="' + skin + '"])');
        // disable unused skin immediately
        disabledSkinStylesheet.setAttribute('rel','');
        disabledSkinStylesheet.setAttribute('disabled',true);
        // add flag class to html immediately
        if (isCompact == true) document.querySelector('html').classList.add('preparing-compact-menu');
    </script>
   
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">?</a>
    </div>





    <script src="/Library/vendor/jquery/jquery.min.js"></script>
    <script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
    <script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/Library/vendor/pace-progress/pace.min.js"></script>
    <script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
    <script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="/Library/javascript/theme.min.js"></script>
    <script>
        Object.defineProperty(WebSocket,'OPEN',{ value: 1,});
    </script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

解决方法

您可能会发现在使 JavaScript 繁重的模板在 Blazor 中很好地工作方面，您的工作被削减了。

您可能需要使用 IJSRuntime

https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0

我想我知道这个问题从何而来！如果您在“Host.cshtml”文件中注释掉以下代码，这个问题很可能会消失！

<script>
    Object.defineProperty(WebSocket,'OPEN',{ value: 1,});
</script>

但是！！！！你会得到一些与“WebSocket”相关的 javascript 错误！像这样： “WebSocket 未处于 OPEN 状态” 要么 “未捕获（承诺）错误：如果连接未处于‘已连接’状态，则无法发送数据。” 这些错误的原因是“pace.min.js”文件和“blazor.server.js”文件之间的冲突！您可以查看this link了解更多信息并获得更多帮助

在 Blazor 服务器端运行 JavaScript 库 (Looper) - 某些 JavaScript 代码未运行

如何解决在 Blazor 服务器端运行 JavaScript 库 (Looper) - 某些 JavaScript 代码未运行

解决方法

相关推荐