Wie lade ich fancybox nur einmal in DotNetNuke (DNN) (JS ist bereits in Thema und Module enthalten)

Question

Ich habe eine DotNetNuke-Website und ich bekomme eine "Fancybox bereits initialisiert" -Fehler.

Ich würde gerne wissen, wie ich prüfen und nur die JavaScript-Datei einmal beim Laden der Seite aufnehmen kann? Ich weiß, dass der Script Manager die JS-Datei nur einmal hinzufügen wird, aber was, wenn die Skin den Script Manager nicht verwendet?

Das Thema enthält die JavaScript-Datei in der ASCX-Datei in folgenden Weise:

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

Mein benutzerdefinierter DNN-Modul enthält die gleiche JS-Datei mit dem Skript-Manager in dem Code-Behind verwenden:

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); 

Ich muss die Fancybox JS zu allen meinen Modulen hinzufügen, da sie auf Designs mit Fancybox installiert werden können, die bereits enthalten sind oder nicht.

Ich brauche den Fancybox-Code, der im Design enthalten ist, wenn das Modul nicht auf einer bestimmten Seite platziert ist.

Ich habe überlegt, eine Portaleinstellung für alle meine Module zu erstellen, die es Ihnen ermöglicht, die Aufnahme der Fancybox JS-Datei zu deaktivieren, wenn sie bereits im Design enthalten ist.

Ich habe andere Beiträge angeschaut, aber meine Frage betrifft DNN-Module und das Thema selbst.

Ich versuchte diesen Code in das Thema von diesem Posten zu verwenden, aber es scheint nicht zu funktionieren: how to check if fancybox exists on page already in dieser Situation

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

Answer 1

Normalerweise würde ich meine Module alle das Skript enthalten sicherzustellen des Clients mit Ressourcenverwaltungs-API (oder dnnJsInclude). Dadurch können mehrere Skriptregistrierungen von dem Modul, das der Seite mehrmals hinzugefügt wurde, verhindert werden. Da Sie jedoch das Skript über ein Design oder ein Modul registrieren lassen können, werden Dubletten möglicherweise nicht verhindert, da der Pfad zum Skript unterschiedlich ist.

Eine bessere Übung ist es, die Fancybox js-Bibliothek in Ihre Modul- und Theme-Installationspakete als Javascript Library extension für DNN aufzunehmen. Dadurch können Sie das JavaScript zentral im CMS verwalten (unter Einstellungen> Erweiterungen> JavaScript-Bibliotheken) und es in Ihr Thema oder Modul einfügen, indem Sie den Namen Verweis - wodurch doppelte Einschlüsse auf einer Seite zu beseitigen.

, das zu tun, schließen die minimierte js-Datei im Root-Paket zip und einen neuen Abschnitt in beide Themen- und Modul .dnn Manifest-Dateien:

<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> 

Dieser wird versuchen, die Javascript-Bibliothek mit dem Namen zu installieren "Fancybox" in Ihre DNN-Umgebung entweder aus dem Modul oder dem Thema.

Ihrem Skript ändern in beide Ihr Modul und Thema auf die folgenden:

C# -Code hinter:

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

oder.ASCX enthält:

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

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