Führen Sie JS-Funktionen aus, wenn das Dokument geladen wird und wenn auf ein Element geklickt wird

Question

Ich versuche, ein Tampermonkey-Skript zu schreiben, um eine von mir verwendete Geschäfts-Webanwendung zu erweitern. Im Grunde genommen erscheint eine URL auf der Seite und ich muss eine Zahl aus der URL extrahieren und diese Zahl dann verwenden, um einen neuen Link zu erstellen und ihn an das übergeordnete Element anzuhängen.

Ich habe das bisher, aber es funktioniert nicht, wenn ich auf das Element klicke (Paginierung ist nur UL) oder wenn das Dokument geladen wird. Ich weiß, dass die Funktion so funktioniert, als ob ich sie so einstellen würde, dass sie ausgeführt wird, wenn ich auf eine beliebige Stelle im Dokument klicke. Wenn JS meldet, dass eine Seite geladen wurde, ist es fast so, als wäre die Seite noch nicht vollständig geladen.

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

        }
    }

 })();

Das

UL-Element sieht folgendermaßen aus:

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

Wie ich oben sagte: Wenn ich es so einstelle, dass es ausgeführt wird, wenn ich irgendwo auf das Dokument klicke, funktioniert die Funktion wie erwartet. Was mich noch mehr verwirrt, ist, dass es bei Verwendung von document.onload nicht funktioniert. Es ist, als ob die Seite erst dann mit dem Laden von Daten beginnt, wenn ich anfange, mit ihr zu interagieren. Der Grund, warum ich versuche, die Funktion auszuführen, wenn auf Paginierung geklickt wird, liegt darin, dass die Seite anscheinend alle Daten abruft und sie an einem Ort speichert (den ich nicht sehen kann) und dann einfach durch die Seite blättert, wenn auf Paginierung geklickt wird. Daher muss ich die Funktion für den generierten Link auf der neuen Seite ausführen, sobald auf die Paginierung geklickt wird.

Es scheint, als müsste ich die Ausführung von document.onload verzögern oder auf andere Weise herausfinden, warum die Dokumentdaten nach dem Laden der Dokumentdaten nicht ausgeführt werden, wenn auf das UL-Paginierungselement geklickt wird?

Answer 1

而不是等待页面呈现，然后循环遍历所有元素以附加锚标记。只需使用 MutationObserver 来处理运行逻辑后呈现的任何元素。

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