Verwenden Sie die gleiche Methode mehrmals hintereinander

Lesezeit: 4 Minuten

Benutzer-Avatar
Pedro Ferreira

Kontext:

Ich verwende barba js, um einige Seitenübergänge auf einer WordPress-Website vorzunehmen, und ich muss jedes Mal, wenn sich die Seite ändert, einige Skripte laden, hauptsächlich einige js/css-Dateien aus einem WordPress-Plugin, damit die Ajax-Suche funktioniert. Ich habe eine Methode erstellt, die das Skript src/href empfängt und dann das Element zum Kopf hinzufügt. Das Problem könnte an meiner schlechten Codestruktur oder an der Bibliothek liegen, die ich ehrlich gesagt nicht kenne.

Problem:

Der Code führt nur das erste Skript aus, das ich aufrufe, und wie ich oben sagte, weiß ich nicht, ob es aus meinem Code oder aus der Bibliothek stammt!

Code:

Zuerst dachte ich, ich brauche eine Art Timeout, damit der Code funktioniert, also habe ich das gemacht

{
                namespace: 'product',
                beforeEnter(data) {
                    //loads styles
                    setTimeout(reloadStyles('ivory-search-styles-css', 'wp-content/plugins/add-search-to-menu/public/css/ivory-search.css?ver=4.4.7'), 500)

//loads javascript files.
                    setTimeout(reloadScripts('wp-content/plugins/add-search-to-menu/public/js/ivory-ajax-search.js?ver=4.4.7'), 800)
                    setTimeout(reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-search.js?ver=4.4.7'), 1000)
                    setTimeout(reloadScripts('/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7'), 1200)

                    searchTranslations()
                    // refresh breadcrumbs
                    let documentAjax = (new DOMParser()).parseFromString(data.next.html, 'text/html');
                    let breadcrumbsAjax = documentAjax.querySelector('.breadcrumbs')
                    let breadcrumbs = document.querySelector('.breadcrumbs')
                    breadcrumbs.innerHTML = breadcrumbsAjax.innerHTML;


                    logoPath.style.fill = "black"

                }
            },


Dies ist der Originalcode (ohne die Timeouts):

{
                namespace: 'product',
                beforeEnter(data) {

                    reloadStyles('ivory-search-styles-css', '/wp-content/plugins/add-search-to-menu/public/css/ivory-search.css?ver=4.4.7')

                    reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-ajax-search.js?ver=4.4.7')
                    reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-search.js?ver=4.4.7')
                    reloadScripts('/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7')

                    searchTranslations()
                    // refresh breadcrumbs
                    let documentAjax = (new DOMParser()).parseFromString(next.html, 'text/html');
                    let breadcrumbsAjax = documentAjax.querySelector('.breadcrumbs')
                    let breadcrumbs = document.querySelector('.breadcrumbs')
                    breadcrumbs.innerHTML = breadcrumbsAjax.innerHTML;


                    logoPath.style.fill = "black"

                }
            },

Danke im Voraus !

Bearbeiten: Dies ist die Methode

    const reloadScripts = (scrpSrc) => {

        console.log("Script loaded:  " + scrpSrc)

        var wpcf7 = { "apiSettings": { "root": "/wp-json\/contact-form-7\/v1", "namespace": "contact-form-7\/v1" } };

        let head = document.getElementsByTagName('head')[0]
        let script = document.createElement('script')

        script.src = scrpSrc;


        if (script != undefined || script != null) {
            head.removeChild(script)
            head.appendChild(script)
        }
        else head.appendChild(script)

    }

Benutzer-Avatar
tstrand66

Versuchen Sie, die folgenden Änderungen vorzunehmen. Die Hauptänderung wäre, dass Sie die falsche Variable überprüfen, bevor Sie das Skript entfernen und hinzufügen. Überprüfen Sie, ob der Kopf ein Skript enthält, und entfernen Sie dieses. Danach habe ich einige Änderungen vorgenommen, damit der Code besser lesbar und etwas trockener wird.

const reloadScripts = (scrpSrc) => {
        console.log("Script loaded:  " + scrpSrc)
        const wpcf7 = { 
          "apiSettings": { 
            "root": "/wp-json\/contact-form-7\/v1", 
            "namespace": "contact-form-7\/v1" 
            } 
          };
        let head = document.querySelector('head'),
          headScript = head.querySelector('[src="https://stackoverflow.com/questions/62060629/="+ scrpSrc +'"]'),
          script = document.createElement('script');
         //checking if head already has a script
        if (headScript != undefined || headScript != null) {
            head.removeChild(headScript);
        }
        //then always do this piece. not DRY to have it inside and outside the if stmt
        script.src = scrpSrc;
        head.appendChild(script)
    }

  • danke, das einzige, was ich nicht verstanden habe, ist, warum Sie ein Skript-Tag in dieser Zeile auswählen, `headScript = head.querySelector(‘script’),` weil dadurch das erste Skript-Tag ausgewählt wird, und das möchte ich nicht:/

    – Pedro Ferreira

    29. Mai 2020 um 17:47 Uhr

  • @PedroFerreira Sie haben ursprünglich überprüft, ob die gerade definierte Skriptvariable definiert wurde, und wenn ja, dann entfernt und gelesen. Ich nahm an, Sie wollten das vorhandene Skript-Tag entfernen und das neue laden. Wenn dies nicht der Fall ist, erläutern Sie bitte, was Ihr Endziel ist.

    – tstrand66

    29. Mai 2020 um 18:13 Uhr

  • Die Hauptsache ist, dass ich ein neues Skript laden möchte, indem ich die src verwende, die ich in den Argumenten zur Verfügung stelle. Die Skriptvariable, die ich habe, entspricht dem von Ihnen erstellten HeadScript. Der von Ihnen geschriebene Code ist in Ordnung, aber die Tatsache, dass Sie den Abfrageselektor verwenden, wählt das erste Skript-Tag des Kopfs aus und eliminiert es durch das, das wir erstellen

    – Pedro Ferreira

    29. Mai 2020 um 18:47 Uhr

  • Um es kurz zu machen, tut mir leid, dass ich so verwirrend bin. Ich lade ein neues Skript-Tag, und das if-Tag prüft nur, ob das Skript, das ich erstellt habe, bereits existiert, also lädt es nicht viele Skripte einfach so!

    – Pedro Ferreira

    29. Mai 2020 um 18:49 Uhr

  • @PedroFerreira Ich habe meine Antwort geändert, um zu prüfen, ob das HeadScript mit dem übergebenen src übereinstimmt. wenn nicht, wird nichts entfernt

    – tstrand66

    29. Mai 2020 um 20:50 Uhr

1385730cookie-checkVerwenden Sie die gleiche Methode mehrmals hintereinander

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy