如何在DotNetNuke（DNN）中只加载一次fancybox（JS已经包含在主题和模块中）

Question

我有一个 DotNetNuke 网站，但出现 'fancybox already initialized' 错误。

我想知道如何在页面加载时检查并仅包含一次 JavaScript 文件？我知道脚本管理器只会添加一次JS文件，但是如果皮肤没有使用脚本管理器怎么办？

主题通过以下方式在.ascx文件中包含JavaScript文件：

<dnn:DnnJsInclude runat="server"
FilePath="js/jquery.fancybox3.min.js" PathNameAlias="SkinPath" />

我的自定义 DNN 模块在代码隐藏中包含使用脚本管理器的相同 JS 文件：

scriptInclude = new System.Web.UI.HtmlControls.HtmlGenericControl("script");
                scriptInclude.Attributes["type"] = "text/javascript";
                scriptInclude.Attributes["src"] = this.TemplateSourceDirectory + "/Scripts/jquery.fancybox.min.js";
                scriptInclude.ID = ID + "_6";

                Page.Header.Controls.Add(scriptInclude);

我需要将 Fancybox JS 添加到我的所有模块中，因为它们可以安装在已经包含或不包含 Fancybox 的主题上。

如果模块没有放在特定页面上，我需要主题中包含的 Fancybox 代码。

我一直在考虑在我的所有模块上创建一个门户设置，这将允许您在 Fancybox JS 文件已经包含在主题中时关闭它的包含。

我看过其他 post，但我的问题涉及 DNN 模块和主题本身。

我曾尝试在 post 的主题中使用此代码，但它似乎不起作用：how to check if fancybox exists on page already

if(typeof $.fancybox == 'function') {
     fancy box loaded;
} else {
     fancy box not loaded;
}

Answer 1

通常在这种情况下，我会确保我的模块都包含使用客户端资源管理 API（或 dnnJsInclude）的脚本。这可以防止多个脚本注册来自多次添加到页面的模块。但是因为您可以从主题或模块中注册脚本，所以它可能无法防止重复，因为脚本的路径会有所不同。

更好的做法是在您的模块和主题安装包中包含 Fancybox js 库作为 DNN 的 Javascript Library extension。这将允许您在 CMS 中集中管理 javascript（在“设置”>“扩展”>“Javascript 库”下）并通过 name 将其包含在您的主题或模块中参考 - 这将消除页面上的重复包含。

为此，请在根包 zip 中包含缩小的 .js 文件，并在主题和模块 .dnn 清单文件中包含一个新部分：

<package name="Fancybox" type="JavaScript_Library" version="3.1.20">
  <friendlyName>jQuery Fancybox</friendlyName>
  <description>jQuery lightbox script for displaying images, videos and more.</description>
  <iconFile></iconFile>
  <owner>
    <name>fancyApps</name>
    <organization>fancyApps</organization>
    <url>http://www.fancyapps.com</url>
    <email>support@fancyapps.com</email>
  </owner>
  <license />
  <releaseNotes />
  <azureCompatible>true</azureCompatible>
  <dependencies />
  <components>
    <component type="JavaScript_Library">
      <javaScriptLibrary>
        <libraryName>Fancybox</libraryName>
        <fileName>jquery.fancybox.min.js</fileName>
        <objectName>fancybox</objectName>
        <cdnUrl>https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"</cdnUrl>
        <preferredScriptLocation>PageHead</preferredScriptLocation>
      </javaScriptLibrary>
    </component>
    <component type="JavaScriptFile">
      <jsfiles>
        <libraryFolderName>Fancybox</libraryFolderName>
        <jsfile>
          <name>jquery.fancybox.min.js</name>
        </jsfile>
      </jsfiles>
    </component>
  </components>
</package>

这将尝试从模块或主题将名称为 "Fancybox" 的 Javascript 库安装到您的 DNN 环境中。

将模块和主题中包含的脚本更改为以下内容：

后面的 C# 代码：

using DotNetNuke.Framework.JavaScriptLibraries;
...
JavaScript.RequestRegistration("Fancybox");
JavaScript.Register(this.Page);

或.ASCX包括：

<%@ Register TagPrefix="dnn" TagName="JavaScriptLibraryInclude" Src="~/admin/Skins/JavaScriptLibraryInclude.ascx" %>

<dnn:JavaScriptLibraryInclude runat="server" Name="Fancybox" />

如何在DotNetNuke（DNN）中只加载一次fancybox（JS已经包含在主题和模块中）

How to load fancybox only once in DotNetNuke (DNN) (JS is already included in theme and modules)

javascript

duplicates

dotnetnuke

scriptmanager