Comment charger fancybox une seule fois dans DotNetNuke (DNN) (JS est déjà inclus dans le thème et les modules)

Question

J'ai un site Web DotNetNuke et je reçois une erreur «fancybox déjà initialisée».

Je voudrais savoir comment je peux vérifier et inclure le fichier JavaScript une seule fois quand la page se charge? Je sais que le gestionnaire de script ajoutera le fichier JS une seule fois, mais que se passe-t-il si le skin n'utilise pas le gestionnaire de script?

Le thème inclut le fichier JavaScript dans le fichier .ascx de la manière suivante:

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

module Mon DNN personnalisé comprend le même fichier JS en utilisant le gestionnaire de script dans le code-behind:

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

Je dois ajouter le Fancybox JS à tous mes modules car ils peuvent être installés sur des thèmes avec Fancybox déjà inclus ou non.

J'ai besoin du code Fancybox inclus dans le thème si le module n'est pas placé sur une page particulière.

J'ai pensé à créer un paramètre de portail sur tous mes modules, ce qui vous permettra de désactiver l'inclusion du fichier Fancybox JS lorsqu'il est déjà inclus dans le thème.

J'ai regardé d'autres articles, mais ma question concerne les modules DNN et le thème lui-même.

J'ai essayé d'utiliser ce code dans le thème de ce poste, mais il semble ne pas fonctionner: how to check if fancybox exists on page already

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

Answer 1

Normalement, dans cette situation, je veillerai à mes tous les modules comprennent le script en utilisant le client API de gestion des ressources (ou dnnJsInclude). Cela peut empêcher plusieurs enregistrements de scripts du module ajouté à la page plusieurs fois. Mais comme vous pouvez enregistrer le script à partir d'un thème ou d'un module, il se peut qu'il n'empêche pas les doublons car le chemin d'accès au script sera différent.

Une meilleure pratique consiste à inclure la bibliothèque Fancybox js dans votre module et les packages d'installation de thème en tant que Javascript Library extension pour DNN. Cela vous permettra de gérer le javascript de manière centralisée dans le CMS (sous Paramètres> Extensions> Bibliothèques Javascript) et de l'inclure dans votre thème ou module par référence - ce qui éliminerait les doublons sur une page.

Pour ce faire, ajoutez le fichier .js minified dans le paquet zip racine et une nouvelle section à la fois le thème et le module manifeste de fichiers .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> 

Cela va tenter d'installer la bibliothèque Javascript avec le nom "Fancybox" dans votre environnement DNN à partir du module ou du thème.

Changer votre script inclut à la fois votre module et le thème à ce qui suit:

code C# derrière:

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

ou.ASCX inclut:

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

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