如何在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" />