问题描述
我正在尝试将 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了解更多信息并获得更多帮助