Правильное добавление JavaScript на страницу бритвы - PullRequest
Новая
       8

Правильное добавление JavaScript на страницу бритвы

0 голосов
/ 24 апреля 2019

У меня есть шаблон, который я использую из шаблона монстра. В файлах есть страница 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")

Верхний код находится в файле "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>

Я до сих пор не знаю, почему это не работает из файла Script ...

ОБНОВЛЕНИЕ - 4-26-2019

Я нашел проблему. Шаблон был создан с более ранней версией jQuery. Я обнаружил, что файл Script загружается и частично работает, когда я удаляю 

jQuery(document).on('ready', function () {

Весь файл выглядит так 

(function($) {
'use strict';

    jQuery(document).on('ready', function () { 

    ---> All the jQuery Code

    });

 })(jQuery);

Я изменил вышеприведенную строку на: 

 }(jQuery));

Я видел некоторые другие реализации, которые имели это таким образом.

Однако с jQuery 3.3.1 что-то не так с этим, если кто-нибудь знает, как правильно отформатировать его, чтобы это работало, что очень помогло бы.

1 Ответ

0 голосов
/ 24 апреля 2019

Вы меняете с 

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

до 

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

Будет работать

Вы можете ссылаться на эту ссылку, чтобы понять разницу между Script.Render против тега script

В чем разница между "@ Script.Render" и ""?

Обновление:

Если у вас есть _Layout.cshtml представление, подобное этому 

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

тогда вы можете иметь представление содержимого index.cshtml, как это 

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