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

Question

我有一个DotNetNuke网站，并且我得到一个'fancybox已经初始化'的错误。

我想知道如何检查并且只在页面加载时包含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文件。

我看了其他文章，但我的问题涉及DNN模块和主题本身。

我也尝试从这个帖子的主题，使用此代码，但它似乎没有工作：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（在Settings> Extensions> Javascript Libraries下），并通过名称引用将其包含在主题或模块中 - 这将消除页面上的重复包含。

要做到这一点，包括在根包拉链缩小的.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> 

这将尝试与名称安装JavaScript库将“Fancybox”从模块或主题添加到您的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" />