javascript - 在 DNN 中包含 JavaScript 文件的不同方法以及如何使用延迟和异步加载

Question

我见过几个论坛，人们提到他们不能在 DNN 中对 JavaScript 文件使用 Defer 和 Async。这是真的？请参阅下面的两个链接:

Link 1

Link 2

是否有任何新的开发或最近的更新可以实现此目的，而无需使用 DNN 性能选项卡中打开的复合功能？

有些人提到您可以将 JavaScript 函数包含在 $( document ).ready() 函数中。

我还想知道下面的方法 1 和 2 在 DNN 中包含 JavaScript 文件有什么区别？

方法 1 (ASP)

          var moduleName = "MiniCart";
        //Include js file, prefix these files with this Type's name to avoid conflicts with multiple modules on the same page
        System.Web.UI.HtmlControls.HtmlGenericControl scriptInclude = (System.Web.UI.HtmlControls.HtmlGenericControl)Page.Header.FindControl(ID);
        if (scriptInclude == null)
        {
            scriptInclude = new System.Web.UI.HtmlControls.HtmlGenericControl("script");
            scriptInclude.Attributes["type"] = "text/javascript";
            scriptInclude.Attributes["src"] = this.TemplateSourceDirectory + "/Scripts/toastr.js";
            scriptInclude.ID = ID + $"{moduleName}_Toastr";

            Page.Header.Controls.Add(scriptInclude);

        }
    }

方法 2(客户端资源管理器)

 ClientResourceManager.RegisterScript(this.Page, "~/DesktopModules/MiniCart/Scripts/miniCartAjaxLoader.js", FileOrder.Js.DefaultPriority, "DnnFormBottomProvider");

方法3

我知道您还可以创建一个 JavaScript 库扩展并像普通模块一样安装它，并在后面的代码中引用您需要的库的名称，如下所示:

JavaScript.RequestRegistration("Fancybox");
JavaScript.Register(this.Page);

GitHub 上已经有几个可用于 DNN 的库:https://github.com/EngageSoftware/DNN-JavaScript-Libraries

方法4您还可以使用 dnnJsInclude 将 JavaScript 文件添加到您的文档中: http://www.dnnsoftware.com/wiki/client-resource-management-api

http://bdukes.github.io/Making-Full-Use-of-the-Client-Resource-Management-Framework/#/code-registration

Answer 1

从 DNN 9.2.0 开始，您可以使用 HtmlAttributesAsString 属性来指定客户端依赖框架本身不支持的属性。例如HtmlAttributesAsString="defer:'defer'" 或 HtmlAttributesAsString="async:'async'"。

这也适用于跨域和完整性属性，例如

<dnn:DnnJsInclude ID="DnnJsBootStrap" runat="server" FilePath="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ForceProvider="DnnFormBottomProvider" Name="bootstrap" Version="4.1.1" HtmlAttributesAsString="crossorigin:'anonymous',integrity:'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T'" />

输出:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js?cdv=142" crossorigin="anonymous" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" type="text/javascript"></script>

参见https://github.com/Shazwazza/ClientDependency/wiki/Html-Attributes