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

Question

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

是否有任何新的开发或最近的更新允许这样做而无需使用在 DNN 的性能选项卡中打开的复合功能？

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

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

方法一(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");

方法三

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

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

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

方法四 您还可以使用 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

这取决于您如何将 JavaScript 文件包含在模块中。如果您使用客户端依赖框架，目前无法指定异步或延迟。但是，有一个关于此的开放 GitHub 问题/Jira 问题。如果您在模块中使用标准脚本标签来包含 JavaScript，那么您可以使用脚本标签支持的任何内容。

Answer 2

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

这也适用于 crossorigin 和 integrity 属性，例如

<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

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

Different methods of including JavaScript files in DNN and how to use Defer and Async loading

javascript

dotnetnuke