【发布时间】：2019-09-13 06:04:20
【问题描述】：
我有一个模板，我正在使用来自模板怪物的模板。在文件中有一个 javascript 页面，其中包含运行页面所需的所有脚本。我已将此添加到呈现脚本的页面底部。它似乎没有访问该文件。它在页面上，当我在“检查对象”下查看它时出现。当我将代码 sn-p 直接放在剃须刀页面中时，它可以工作。任何想法为什么它不会从 javascript 文件中提取它？谢谢你的帮助。 编辑 它位于 _Layout 页面中。菜单在哪里。
插入剃须刀页面时，以下内容有效。
<script type="text/javascript">
$(document).ready(function () {
$(".sticky-menu").sticky({ topSpacing: 0 });
});
$(window).on('load', function () {
function fadeOut(el) {
el.style.opacity = 0.4;
var last;
var tick = function () {
el.style.opacity = +el.style.opacity - (new Date() - last) / 600;
last = +new Date();
if (+el.style.opacity > 0) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 100);
} else {
el.style.display = "none";
}
};
tick();
}
var pagePreloaderId = document.getElementById("page-preloader");
setTimeout(function () {
fadeOut(pagePreloaderId)
}, 1000);
});
</script>
这是我在剃须刀页面中无法使用的内容
@Scripts.Render("~/Scripts/scripts.js")
顶部代码位于“scripts.js”文件中。
这个文件中有很多代码，似乎没有一个工作。这意味着它就像没有访问脚本。页面中加载的所有脚本与模板中的常规 HTML 的顺序相同。模板 HTML 文件有效。
更新 -
我通过将其移出脚本页面并移至布局页面来实现此功能。我仍然不确定为什么或是什么导致这个 sn-p 在脚本页面中不起作用。这似乎是唯一不起作用的部分。
在脚本文件中是这样写的：
(function($) {
'use strict';
jQuery(document).on('ready', function() {
////// Other snippets //////
$(".sticky-menu").sticky({
topSpacing: 0
});
////// Other snippets //////
});
在 _Layout 页面中是这样的：
<script type="text/javascript">
$(document).ready(function () {
$(".sticky-menu").sticky({ topSpacing: 0 });
var hub = $.connection.notificationHub;
$.connection.hub.start()
.done(function () {
console.log("Hub Connected!");
})
.fail(function () {
console.log("Could not Connect!");
});
});
</script>
我仍然不知道为什么这在脚本文件中不起作用...
更新 - 2019 年 4 月 26 日
我发现了问题。模板是使用早期版本的 jQuery 创建的。我发现脚本文件在我删除时加载并部分工作
jQuery(document).on('ready', function () {
整个文件是这样的
(function($) {
'use strict';
jQuery(document).on('ready', function () {
---> All the jQuery Code
});
})(jQuery);
我将上面的行改为：
}(jQuery));
我看到了一些其他的实现方式。
但是，使用 jQuery 3.3.1 有一些不对劲的地方。如果有人知道如何正确格式化它，那么它会很有帮助。
【问题讨论】：
-
在 Visual Studio 中，您可以将脚本文件拖放到编辑器中的页面上，它会自动为您创建标记。
-
是的，但那是针对页面本身的。不一定适用于 _Layout 页面。我在哪里使用@Scripts.Render("")
-
它的工作原理与 .cshtml 页面相同。
-
如果您在所有页面上都使用相同的脚本，那么添加一个
标签： javascript model-view-controller razor-pages