Question

我有一个正在使用的来自Monster模板的模板。在文件中，有一个javascript页面，其中包含运行页面所需的所有脚本。我已将其添加到呈现脚本的页面底部。它似乎没有访问该文件。它在页面上，当我在“检查对象”下查看它时会出现。当我将代码片段直接放在剃须刀页面中时，它可以工作。有什么想法为什么它不会从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")

Top代码位于“ scripts.js”文件中。

此文件中有很多代码，似乎都不起作用。这就意味着它没有访问脚本。页面中加载的所有脚本的顺序与模板中的常规HTML的顺序相同。模板HTML文件有效。

更新-

我通过将其移出脚本页面并移至布局页面来使其工作。我仍然不确定为什么或什么原因导致此代码片段在脚本页面中不起作用。似乎唯一不起作用的部分。

在脚本文件中，其编写方式如下：

(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。可能就不合适了。

Answer 1

您从

更改

@Scripts.Render("~/Scripts/scripts.js")

到

<script src="~/Scripts/scripts.js"></script>

它将起作用

您可以参考此链接以了解Script.Render与脚本标记之间的区别

What is the difference between "@Script.Render" and "<script>"?

更新：

如果您具有这样的_Layout.cshtml视图

<html>
    <body>
        @RenderBody()
        @RenderSection("scripts", required: false)
    </body>
</html>

然后您可以拥有这样的index.cshtml内容视图

@section scripts {
     <script type="text/javascript" src="~/Scripts/scripts.js"></script>
}

将javascript正确添加到剃须刀页面

1 个答案: