Exécuter les fonctions JS lors du chargement du document et lorsqu'un élément est cliqué

Question

J'essaie d'écrire un script Tampermonkey pour étendre une application Web professionnelle que j'utilise. Dans un sens très basique, une URL apparaît sur la page et je dois extraire un numéro de l'URL, puis utiliser ce numéro pour créer un nouveau lien et l'ajouter à l'élément parent.

Jusqu'à présent, j'ai ceci mais cela ne fonctionne pas lorsque je clique sur l'élément (la pagination est juste UL) ou lorsque le document se charge. Je sais que la fonction fonctionne comme si je la paramétrais pour qu'elle s'exécute lorsque je clique n'importe où dans le document, elle fonctionne. Lorsque JS signale qu'une page est chargée, c'est presque comme si la page n'était pas encore complètement chargée.

(function() {
    'use strict';

    //get the pagination element
    var element = document.getElementsByClassName('pagination-sm');
    element.onclick = createLinks;
    document.onload = createLinks;

    function createLinks() {
    var links = document.querySelectorAll ("a[href*='/Field/POPendingCreate/']");

        for (var J = links.length-1; J >= 0; --J) {
            var thisLink = links[J];
            console.log(thisLink.href);
            var ppon = thisLink.href.match(/\d+/)[0];
            console.log(ppon);

            var a = document.createElement('a');
            var linkText = document.createTextNode("Preview Order");
            a.appendChild(linkText);
            a.title = "Preview Order";
            a.href = "https://website.com/Field/DownloadPendingPO?POPPKeyID=" + ppon + "&co=1&po=" + ppon;
            a.target = "_blank";

            var parentNode = thisLink.parentNode;
            console.log(parentNode);
            parentNode.appendChild(a);

        }
    }

 })();

L'élément

UL ressemble à ceci :

<ul uib-pagination="" items-per-page="formData.itemPerPage" class="pagination-sm ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope pagination ng-not-empty" data-total-items="pendingList.length" data-ng-model="formData.currentPage" data-max-size="10" data-ng-if="!attachmentView &amp;&amp; filteredDocuments.length > 0" role="menu"><!-- ngIf: ::boundaryLinks -->
<!-- ngIf: ::directionLinks --><li role="menuitem" ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-prev ng-scope disabled"><a href="" ng-click="selectPage(page - 1, $event)" ng-disabled="noPrevious()||ngDisabled" uib-tabindex-toggle="" class="ng-binding" disabled="disabled" tabindex="-1">Previous</a></li><!-- end ngIf: ::directionLinks -->
<!-- ngRepeat: page in pages track by $index --><li role="menuitem" ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&amp;&amp;!page.active}" class="pagination-page ng-scope active"><a href="" ng-click="selectPage(page.number, $event)" ng-disabled="ngDisabled&amp;&amp;!page.active" uib-tabindex-toggle="" class="ng-binding">1</a></li><!-- end ngRepeat: page in pages track by $index -->
<!-- ngIf: ::directionLinks --><li role="menuitem" ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-next ng-scope disabled"><a href="" ng-click="selectPage(page + 1, $event)" ng-disabled="noNext()||ngDisabled" uib-tabindex-toggle="" class="ng-binding" disabled="disabled" tabindex="-1">Next</a></li><!-- end ngIf: ::directionLinks -->
<!-- ngIf: ::boundaryLinks -->
</ul>

Comme je l'ai dit ci-dessus, lorsque je le configure pour qu'il s'exécute lorsque je clique n'importe où sur le document, la fonction fonctionne comme prévu. Ce qui me rend encore plus confus, c'est que cela ne fonctionne pas lors de l'utilisation de document.onload. C'est comme si la page ne commençait à charger des données qu'après avoir commencé à interagir avec elle. La raison pour laquelle j'essaie d'exécuter la fonction lorsque l'on clique sur la pagination est que la page semble récupérer toutes les données et les stocker quelque part (que je ne peux pas voir), puis lorsque l'on clique sur la pagination, elle feuillette simplement la page. Je dois donc exécuter la fonction sur le lien généré sur la nouvelle page une fois la pagination cliqué.

Il semble que je doive retarder l'exécution de document.onload ou un autre moyen de comprendre une fois les données du document chargées et de comprendre pourquoi elles ne s'exécutent pas lorsque l'on clique sur l'élément de pagination UL ?

Answer 1

Au lieu d'attendre que la page s'affiche, puis de parcourir tous les éléments pour ajouter des balises d'ancrage. Utilisez simplement un MutationObserver pour gérer tous les éléments rendus après l'exécution de votre logique.

JS

(function() {
    'use strict';

    const createLinks = function ( nodeElement ){
        const queryElem = nodeElement.parentElement || nodeElement;
        const links = queryElem.querySelectorAll("a[href*='/Field/POPendingCreate/']");

        for ( const link of links || [] ){
            // Skip link if Preview has been attached
            if ( link.createLinkReady ) continue;

            // Get numbers from link href
            const [ ppon ] = link.href.match(/\d+/);

            // Create an anchor tag
            const a = document.createElement('a');
            a.innerHTML = 'Preview Order';
            a.setAttribute( 'title', 'Preview Order' );
            a.setAttribute( 'href', `https://website.com/Field/DownloadPendingPO?POPPKeyID=${ppon}&co=1&po=${ppon}` );
            a.setAttribute( 'target', '_blank' );
            a.setAttribute( 'rel', 'nofollow' );

            // Append anchor tag to parent element
            link.parentElement.appendChild( a );
            link.createLinkReady = true;
        }

    }

    // Create DOM MutationObserver
    const Observer = new MutationObserver( function( mutationsList ) {
        // Loop through mutations
        for ( const mutation of mutationsList || [] ) {
            // Loop through added nodes
            for ( const node of mutation.addedNodes || [] ){
                // Run createLinks on node
                createLinks( node );
            }
        }
    });

    // Observe DOM for new elements starting from document.body
    Observer.observe( document.body, { childList:true, subtree:true } );

    // Process links that have been rendered
    createLinks( document.body );
 })();