JavaScript没有在Blazer主页上运行的原因
JavaScript没有在Blazer主页上运行的原因
提问于 2022-08-06 13:58:41
JavaScript没有在Blazer的主页上运行的原因，考虑到我们在运行web应用程序时可以访问主文件，并且JavaScript文件的链接是正确的，并且当您单击它时，代码将在Ceres部分中正确和完整地显示。我们会给你的。但是JavaScript函数没有被调用或者根本没有被执行。我的代码如下：
function opeSublist() {
try {
if (checkFirstList == 0) {
checkFirstList = 1;
}
var checkList = document.getElementById('FirstList');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
} catch {}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
<a href="" class="reload">Referesh . . .</a>
<a class="dismiss"></a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>
javascript函数位于multiselect-dropdown.js javascript单独文件中。但是，我不清楚为什么不执行这个函数，也不显示结果。实际上，通过单击一个DIV，应该显示一个列表，通过单击列表外部，列表应该从显示模式中删除。所有步骤都正确。在普通的HTML页面中，这个函数被正确地执行。但是，当传输到Blazor时，它不会运行。我在Blazer的HTML页面上做的事情完全一样。但它没有效果。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-06 18:20:19
为了避免JavaScript函数的复杂性和断开性，最好将在Blazor中调用的函数存储在一个单独的文件中，例如名为blazJavaFile.js，并在wwwroot文件夹中的index.html文件中定义。您提交的文件将更改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/blazJavaFile.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
<a href="" class="reload">Referesh . . .</a>
<a class="dismiss"></a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>然后，在要调用此函数的页面上，创建以下方法并使用以下命令调用它。
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeVoidAsync("opeSublist");
}
}同时，不要忘记添加这个语句@inject IJSRuntime jsRuntime，它是依赖注入，在页面的开头或页面的顶部。在链接示例1和示例2中可以获得更多的信息和更多的示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73260398
复制相关文章
相似问题
腾讯云开发者
