Charger du javascript dans du html à l'intérieur du volet de contenu

Question

Je dispose d'un fichier html que je veux charger à partir de différentes pages dans un dijit.contentpane. Le contenu se charge bien (je viens de définir le href du contentpane), mais le problème est que le javascript dans le fichier html spécifié par href ne semble pas être exécuté de manière cohérente.

L'objectif final est de charger un fichier html dans un contentpane à un point d'ancrage dans le fichier (c'est-à-dire si vous avez tapé index.html#tag pour sauter vers une certaine partie du fichier). J'ai essayé quelques méthodes différentes et je ne semble pas réussir à obtenir que quoi que ce soit fonctionne.

Voici ce que j'ai essayé:

1. (en faisant référence au href du dijit.contentpane)

href="page.htm#ancre"

2. (encore une fois, en faisant référence au href du dijit.contentpane - je ne m'attendais pas vraiment à ce que cela fonctionne, mais j'ai décidé d'essayer quand même)

href="#ancre"

3. (avec ce dernier essai à l'intérieur du html spécifié par href)

    setTimeout("aller_au_point_d_ancrage();", 2000);

    function aller_au_point_d_ancrage()
    {
        location.href = "#ancre";
    }

Ce dernier essai était le plus proche de fonctionner parmi tous. Après 2 secondes (j'ai mis le délai là pour voir si quelque chose dans le code dijit se chargeait éventuellement en même temps que mon javascript), j'ai pu voir le navigateur sauter brièvement au bon endroit de la page html, mais il est immédiatement revenu en haut de la page.

Answer 1

Le Dojo utilise des hachages dans l'URL pour permettre le signet des pages chargées via des appels ajax. Cela se fait à travers l'API dojo.hash. Donc... Je pense que la meilleure chose à faire est de l'utiliser pour déclencher un rappel que vous écrivez à l'intérieur de votre page principale.

Pour faire défiler jusqu'à une position donnée dans vos contenus chargés, vous pouvez alors utiliser node.scrollIntoView().

Par exemple, disons que vous avez une page avec un ContentPane nommé "mainPane" dans lequel vous chargez un fragment html appelé "fragment.html", et votre fragment contient 2 ancres comme ceci :

-fragment.html :

Ancre 1
quelques contenus très longs...
Ancre 2
quelques contenus très longs...

Maintenant, disons que vous avez 2 boutons dans la page principale (nommés btn1 et btn2), qui seront utilisés pour charger votre fragment et naviguer vers l'ancre appropriée. Vous pouvez ensuite connecter cela avec le javascript suivant, dans votre page principale :

        require(['dojo/on', 
                 'dojo/hash', 
                 'dojo/_base/connect', 
                 'dijit/layout/BorderContainer', 
                 'dijit/layout/ContentPane',
                 'dijit/form/Button'], 
                 function(on, hash, connect){
                     dojo.ready(function(){
                         var contentPane = dijit.byId('mainPane');
                         var btn1 = dijit.byId('btn1');
                         var btn2 = dijit.byId('btn2');
                         btn1.on("Click", function(e){
                              if (!(contentPane.get('href') == 'fragment.html')) {
                                  contentPane.set("href", "fragment.html");
                              }
                              hash("anchor1");
                         });

                         btn2.on("Click", function(e){
                              if (!(contentPane.get('href') == 'fragment.html')) {
                                  contentPane.set("href", "fragment.html");
                              }
                              hash("anchor2");
                         });

                         // Dans le cas où nous avons un hachage dans l'URL lors du premier chargement de la page, chargeons le fragment pour pouvoir naviguer vers l'ancre.
                         hash() && contentPane.set("href", "fragment.html");

                         // Ce rappel est ce qui effectuera le défilement réel vers l'ancre
                        var callback = function(){
                            var anchor = Array.pop(dojo.query('a[href="#' + hash() + '"]'));
                            anchor && anchor.scrollIntoView();
                        };

                        contentPane.on("DownloadEnd", function(e){
                            console.debug("fragment chargé");
                            // Appeler le rappel la première fois que le fragment se charge puis s'abonner au sujet de changement de hachages
                            callback();
                            connect.subscribe("/dojo/hashchange", null, callback);
                        });
                    }); // dojo.ready
            }); // require

Answer 2

Si le contenu que vous chargez contient du javascript, vous devriez utiliser dojox.layout.ContentPane.