IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Utilisation du "name" fen�tre pour activer un onglet d�j� ouvert, pb : l'onglet courant s'actualise aussi ?


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre confirm�
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    145
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 145
    Par d�faut Utilisation du "name" fen�tre pour activer un onglet d�j� ouvert, pb : l'onglet courant s'actualise aussi ?
    Bonjour,

    Le probl�me pos� :
    Le probl�me global est la gestion d'un ensemble d'onglets tels que l'on n'ouvre pas (sauf action volontaire) � nouveau un document d�j� ouvert.
    Un fragment (�lement) peut �tre d�fini comme cible dans l'url (toutes les pages utilisent une fonction mettant graphiquement en �vidence un fragment (�l�ment) cibl�. En g�n�ral si l'on vise un nouveau fragment dans un onglet d�ja ouvert on active l'onglet et la nouvelle cible sera atteinte.

    Bien, je s�che.

    La solution �l�mentaire
    Pour r�ouvrir des onglets d�ja ouverts � partir d'une m�me "famille d'onglets", j'utilise l'option "name" dans l'ex�cution de window.open(url,name,.. []).

    Je teste et d�bogue d'abord avec chrome (Version 43.0.2357.130 m) puis avec Explorer et Firefox.

    Le test en ligne de l'exemple de W3School ( adapt� par mes soins pour la r�ouverture et les fragments) fonctionne tr�s bien (y compris pour atteindre un fragment "anchor (ancre)".

    Lorsque je fais tourner l'appli (lourde Wordpress avec beaucoup de plugins dont mes d�veloppements), j'obtiens un ph�nom�ne incongru :
    1- l'activation ou l'ouverture de l'onglet d�fini par url et name se d�roule normalement, mais
    2- L'activation (ou la cr�ation) d'onglet est obtenu par un lien utilisant onclick. Mais l'ex�cution de window.open(url,name,.. []) lance aussi la mise � jour de l'onglet parent comme si on ex�cutait simultan�ment window.location(url) sur la m�me url. J'obtiens ainsi deux onglets identiques

    Le code est simplissime
    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    <a href="url" onclick="ActivateTab(url, name,..." >Aller à... </a>

    et pour js :
    Code js : S�lectionner tout - Visualiser dans une fen�tre � part
    function ActivateTab(url,name,...) { window.open(url,name) }

    Je ne trouve pas de piste.
    J'ai mis des points d'arr�ts sur tous les points sensibles sans rien trouver.
    Il est certain que le probl�me est li� au reste du code, mais en quoi ?

    Merci d'avance, pour une id�e pour comprendre ou explorer...

    Cordialement

    Trebly

    Note :
    1- clic ex�cute la fonction par d�faut clic-droit offre les options du navigateur
    2- Tous les onglets sont nomm�s
    3- Test avec explorer 11 id�
    4- Exemple W3School :
    http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open
    Code js : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html>
    <body>
     
    <p>Click the button to open a new browser window or simply activate it if exists.</p>
     
    <a href="http://www.w3schools.com#test3" onclick="myFunction()">Try it</a> 
    <!-- button ou a =dito -->
     
    <script>
    function myFunction() {
        window.open("http://www.w3schools.com#test3","w3s3"); /* Ajouter un id="test3" dans l'url avec le debogger */
    }
    </script>
     
    </body>
    </html>

  2. #2
    Membre exp�riment�
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - Multim�dia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Par d�faut
    Bonjour,

    Pour moi le click sur le lien provoque deux actions :
    La fonction du onclick qui ouvre la nouvelle fen�tre � l'adresse : http://www.w3schools.com#test3
    Le href du a qui mets � jour la page actuelle : http://www.w3schools.com#test3

    Il faut donc supprimer le href du a.

  3. #3
    Membre confirm�
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    145
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 145
    Par d�faut Solution et ref�rence
    Bonsoir,

    Merci de ta r�ponse, tu as partiellement raison.

    Le fait de r�diger force l'auteur � une r�flexion qui assez souvent m�ne � la solution.

    En fait il faut arr�ter l'action et pour cela il faut que onclick se termine par "return false;"

    Sans le "return false;" l'ex�cution continue et le href est ex�cut� par d�faut avec target="_self".

    Conserver le href permet de garder disponible l'ensemble du menu du click droit.

    Je n'ai pour l'instant trouv� aucun document qui traite de la s�quence op�ratoire d'un tag A ou BUTTON.

    En ce qui concerne la gestion de l'ouverture d'onglets (tabs), c'est la m�me chose.

    On trouve de la doc pour les extensions qui ont acc�s � l'url des tabs (droits demand�s explicitement par le fichier "manifest") ce qui est interdit � des applications pour des raisons de s�curit�.

    La seule solution qui existe est pour l'application de nommer ses onglets (window.open(url,name)), il devient possible de g�rer des contenus de plusieurs onglets � partir du m�me script. C'est d'ailleurs un des cas o� l�attribut "name" (window.name) garde toute son importance quand il a disparu pour de nombreux autres objets avec HTML5.

    Par contre je n'ai trouv� aucune doc explicative claire sur la mani�re de r�soudre ce probl�me (juste de questions avec des r�ponses souvent tr�s anciennes et souvent fausses).

    Je n'ai pas trouv� d'explications sur la mani�re dont window.open(...) fonctionnait avec des onglets (windows) nomm�s. J'ai du le d�couvrir � l'aide de test. En particulier le fait que l'utilisation d'un nom existant produit l'actualisation avec l'url d�sign�e, et s'il n'existe pas une cr�ation.

    Par contre comme il reste semble-t-il impossible pour raisons toujours de s�curit� de tester l'existence de noms sans ouvrir une nouvelle fen�tre, il semble impossible pour y atteindre un fragment (on imagine : var frag= document.GetElementById(idfrag); frag.focus() de ne pas provoquer l'actualisation d'un onglet parce que le seul moyen d'obtenir un handle vers un onglet est window.open qui va travailler tout seul et en particulier actualiser la fen�tre. D�s lors atteindre le fragment passe par sa d�finition dans l'url ( window.open(url,name)).
    Il me semble d'ailleurs fort conseill� pur les m�mes raisons de s�curit� que le nom donn� � l'onglet soit introuvable par une application autre que celle qui le cr�e.

    Enfin l'utilisation du query de l'url permettra de passer � la nouvelle fen�tre (souvent les m�mes scripts), si n�cessaire, des param�tres qui pourront �tre analys�s par le script associ� au nouvel onglet lors de son activation.

    Donc en dehors de ces possibilit�s, reposant totalement sur l'utilisation du name de l'onglet, l'environnement de gestion des onglets d�riv�s reste pauvre pour l'application.

    Les extensions disposent, elles, pour la gestion des onglets d'API de type window.tabs (webkit) qui diff�rent d'un navigateur � l'autre.

    Le contexte de ce d�veloppement est la gestion des documents volumineux � l'aide de WordPress, mais aussi de TIKI, d�coup�s en "pages" mais avec une table des mati�res et des index et autres bibliographies communs. Plusieurs "sections" du m�me ouvrage peuvent �tre "ouvert(es)" simultan�ment et l'ensemble des liens "internes" au document multi-page (multipage) restent assur�s et permettent de naviguer sans risque de r�ouverture de "sections (pages)" d�j� ouvertes.

    Bien que le probl�me ponctuel soit r�solu, le sujet g�n�ral que j'�voque m�rite, je pense, que le sujet reste ouvert.
    Je n'ai pas trouv� de tuto sur le sujet, et je n'ai pas trop le temps d'en concocter un.

    Bien cordialement

    Trebly

  4. #4
    Membre confirm�
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    145
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 145
    Par d�faut Un script qui marche, � propos de choses non dites sur window.open
    Bonjour,

    J'ai mis au point un script qui marche bien et repose sur le fonctionnement de window.open(url,name, frag) dans diff�rents cas.

    Le r�sultat obtenu est exactement celui que je cherchais :
    1. Si la "tab" existe elle est r�ouverte avec focus sur le fragment requis
    2. Si la tab n'existe pas elle est cr��e et r�f�renc�e.
    3. Vrai pour toutes les Tab ouvertes � partir d'url d'un m�me domaine et chargeant le script.


    Rappel : le probl�me est non seulement celui de l'ordre d'ex�cution et des interactions dans le traitement d'�v�nements, mais celui li� au fait que pour raisons de s�curit� des navigateurs un script n'a pas acc�s aux identifiants de fen�tre qu'il n'a pas charg� lui-m�me.
    Ce dernier point est trait� en cr�ant un "cookie" d'�change global attach� au domaine et qui est lu et mis � jour par un script court dupliqu� dans chaque fen�tre (tab).

    Note : "tab" lever l'ambiguit� entre l'objet window qui va d�signer alternativement un onglet ou "tab" et la fen�tre dans un navigateur qui comprend plusieurs onglets. Ici "window" "tab" et "onglet" ont le m�me sens.

    Les points fondamentaux sont :
    • G�rer une liste des noms de fen�tres uniques cr��s
    • Si la fenetre appel�e est la fenetre courante il suffit de faire un focus sur le fragment recherch�
    • Si l'on tente d'ouvrir une fen�tre de nom inexistant sans url, alors une fen�tre vide nouvelle est ouverte
    • Si l'on ex�cute window.open("",wname) pour un nom existant un objet window sera r�cup�r� (var w = window.open("",wname)), il sera alors possible de manipuler l'objet window � titre pr�paratoire et en particulier effectuer un focus sur le fragment avant de la montrer.
    • Si l'on ex�cute successivement window.open("",wname1), que l'on teste si elle n'existe pas d�j�, alors elle sera ouverte vide mais � la suite window.open(url1,wname1) la peuplera avec url1


    Les liens comprennent uniquement le href et sont tri�s en externes ou internes au domaine.
    Je ne traite pas ici le cas des liens externes.
    Pour les liens internes vers des pages d�j� ouvertes ou non, le script est appel� par des fonctions JQuery
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    $(selector).click( function(event) {... OpenOrReusePageOrFrag(parameters); ... })
    Le retour logique de la fonction permet d'arr�ter ou nom le processus de traitement des �v�nements.

    D�sol� pour les commentaires de code qui sont en anglais
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    /**
     * Created by Trebly on 27/08/2015.
     */
    var OpenOrReusePageOrFrag = function (url, pWname, rfrag,libel,idSrc) {/* version b50826 */
        /**
         * url : full url
         * pwname : name previously given to the window (tab) or new unique name
         * rfrag : the fragment to focus
         * libel : title of the window
         * idSrc : the identifier to manages the extended window object for data and cookie management into the others parts of script
         */
        /**
         * Principle :
         *   if pWname the one of the current page (window) then focus the fragment
         *   if not : verify if it is set
         *      - if yes : focus the fragment into the window object and show (focus) the window
         *      - if not : open new with 
         *          -> if yes : focus the frag into the windows and then the widow (which show it)
         *          -> if not : open it
         *   The url must be split or not used if window exist : the window.open considers that if url is not exactly (including frag) the same it must be updated. Then use first window.open("",wmane) and after check window.open(url,wname) to populate it
         *   So we get the window, we get the hash and the new full url (with hash) and open it on right element
         */
        if (window.name === pWname) { /* B50828 - The function can be called from the current window then we just target the frag */
            var t= document.getElementById(rfrag);
            if (t===null) {
                alert('The fragment (element link) doesn\'t exist) : ['+libel+']');
                return false;
            }
            set_header_top_position(t);
            t.focus();
            return true;
        }
     
        var w = window.open("", pWname); /* Try to find if pWanme window exists : this opens an empty tab if not known */
        if (w.document.body.innerHTML === "") { /* Check if the reference contains data : if so it is not new */
            alert("The window (tab) [" + pWname +"] doesn't exist a new tab is opened");
            window.open(url, pWname); /* if not open new */
            set_new_TOC_tab(url,pWname,libel,idSrc); // set_new_TOC_tab : crée ou met à jour le cookie
            w.focus();
            return true;
        }
        else { /* it exists then reopen will update url with frag */
            var frag = w.document.getElementById(rfrag); /* Get the rfrag id element */
            if (frag !== null) { /* If found we focus */
                alert("The window (tab) [" + pWname +"] exist and found and the element [rfrag] exist too the tab at the frag element is focused");
                frag.focus(); /* in w but not show it */
                w.focus();    /* show w in navigator */
                /* note : w = window.open(url, pWname); cannot be used it updates the window if the rfrag is not the current hash */
                return true; /* Will allow to end the onclck sequence */
            }
            else { /* frag don't exist it should not be targetted */
                alert("System error : the fragment [" + rfrag + "] \nhas not been found into the display section\n[" + pWname +
                    "]\nEven you have an obvious explanation (broken link) for example, if not\n" +
                    "please report this error to the plugin author\nThe new tab is going to be opened on current focused element  by default");
                /* Just focus the window after the alert */
                w.focus();
                return true; /* Will allow to end the onclck sequence */
                /* w = window.open(url, pWname); */
            }
            /* the structure of soft should make that reach this point is not normal */
            alert ("System error :OpenOrReusePageOrFrag b51007 - this point should not ever be reached");
            return false;
        }
     
    }
    Cordialement,

    Trebly

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo