Contao-Camp 2024
Ergebnis 1 bis 10 von 10

Thema: Best practise für das Nachladen von JavaScript, HTML und CSS

  1. #1
    Contao-Fan
    Registriert seit
    08.07.2009.
    Beiträge
    530

    Standard Best practise für das Nachladen von JavaScript, HTML und CSS

    Zitat Zitat von Spooky Beitrag anzeigen
    Ja, genau das wird ja im geposteten Link erklärt.
    Ja, das habe ich gesehen und soweit funtkioniert es auch.

    In meinem konkreten Fall würde das aber bedeuten, dass ich bspw. über meine JS callback function mittels document.head.appendChild(script) ein externes JS im DOM / Header nachlade. Ist das durch den Aufruf über document.addEventListener unproblematisch bzw. ist das grundsätzlich der richtige Weg, um DOM Elemente nachzuladen?
    Geändert von Spooky (19.11.2022 um 13:22 Uhr)

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Das ist JavaScript spezifisch und hat grundsätzlich nichts mit der Erweiterung zu tun. Ob das die beste Variante ist kann ich dir ansonsten auch nicht beantworten.
    » sponsor me via GitHub or PayPal or Revolut

  3. #3
    Contao-Fan
    Registriert seit
    08.07.2009.
    Beiträge
    530

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Das ist JavaScript spezifisch und hat grundsätzlich nichts mit der Erweiterung zu tun. Ob das die beste Variante ist kann ich dir ansonsten auch nicht beantworten.
    Ja, die Frage hat nicht originär mit der Erweiterung zu tun. Da diese aber verwendet wird, um externe Dienste zu blockieren, ist das ein konkreter Anwendungsfall. Es ist ja durchaus üblich, dass bspw. ein JS- und ein CSS-Aufruf im Header sowie inline HTML und JS im Body von einem externen Dienst verwendet werden, die geblockt werden müssen. Für mich war die Frage, ob das Einschleusen und Steuern der Elemente im DOM per JS der gewollte bzw. beste Weg ist. Dazu müsste es vermutlich bereits zahlreiche Anwendungsfälle abseits von iFrame, YouTube und Google Maps geben.

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Zitat Zitat von bird Beitrag anzeigen
    Es ist ja durchaus üblich, dass bspw. ein JS- und ein CSS-Aufruf im Header sowie inline HTML und JS im Body von einem externen Dienst verwendet werden, die geblockt werden müssen.
    JS ja, für HTML und CSS hatte ich den Fall noch nie.



    Zitat Zitat von bird Beitrag anzeigen
    Für mich war die Frage, ob das Einschleusen und Steuern der Elemente im DOM per JS der gewollte bzw. beste Weg ist.
    Rein technisch gibt es ja keinen anderen Weg
    » sponsor me via GitHub or PayPal or Revolut

  5. #5
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du kannst letztendlich alles in deiner Callback der addModule-Methode machen, musst es dir nur selber mit JS bauen:
    Code:
    document.addEventListener("DOMContentLoaded", function() {
        function myCallback(){
           // JS nachladen...
           // CSS nachladen...
           // HTML manipulieren...
       }
    
        cookiebar.addModule(cookieId, myCallback, {
            selector: '#element',           // [required: string, HTMLElement] Defines the element in which the message is output
            message: 'Your text',           // [optional: string] The text to be displayed
            button: {                       // [optional: object]
                show: true,                 // [required: bool]   Extends the output by a confirmation button
            }
        });
    });
    Ich würde auch empfehlen auf die addModule-Methode zu setzen, statt issetCookie. Der Nachteil der issetCookie-Methode ist hier beschrieben:
    https://github.com/oveleon/contao-cookiebar/issues/32

  6. #6
    Contao-Fan
    Registriert seit
    08.07.2009.
    Beiträge
    530

    Standard

    Ja, ich bin ganz bei dir und würde ebenfalls auf die addModule-Methode setzen.
    Mir geht es konkret um die Punkte, die in deiner Beispiel-Funktion als Kommentar aufgeführt sind:

    // JS nachladen...
    // CSS nachladen...
    // HTML manipulieren

    Ich bin mir nicht sicher, was der beste Weg ist, um JS und CSS im Header sowie JS und HTML im Body nachzuladen. Wie würdest Du das machen? DOM-Manipulationen mittels JS können bei komplexeren Themen problematisch sein.

  7. #7
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Um hier eine best-practice zu finden, müsste man den genauen use-case kennen. In der Callback könntest du dir deine Elemente erstellen, hier ein Beispiel:
    Code:
    var linkElement = document.createElement('link');
    linkElement.setAttribute('rel', 'stylesheet');
    linkElement.setAttribute('type', 'text/css');
    linkElement.setAttribute('href', 'pfad/css.css');
    
    // Edit
    document.head.appendChild(linkElement);
    Geändert von Doi (19.11.2022 um 11:26 Uhr)

  8. #8
    Contao-Fan
    Registriert seit
    08.07.2009.
    Beiträge
    530

    Standard

    Zitat Zitat von Doi Beitrag anzeigen
    Um hier eine best-practice zu finden, müsste man den genauen use-case kennen.
    Wie geschrieben, es geht um den Aufruf eines externen Scripts und eines CSS-Files im Header sowie um inline JS und HTML an einer bestimmten Stelle im Body.
    Ich trage mal meine Ideen zusmmen:

    CSS File header
    Code:
    var linkElement = document.createElement('link');
    linkElement.setAttribute('rel', 'stylesheet');
    linkElement.setAttribute('type', 'text/css');
    linkElement.setAttribute('href', 'pfad/css.css');
    document.head.appendChild(linkElement);
    JS Script Header
    Code:
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'pfad/script.js';    
    document.head.appendChild(script);
    JS Script Body (jQuery)
    Code:
    $('body #container').append('<script>Script<\/script>');
    HTML Body (jQuery)
    Code:
    $('body #container').append('<div class="myClass">HTML</div>');
    Ob das der beste Weg ist, kann ich nicht beurteilen ...
    Geändert von bird (21.11.2022 um 09:27 Uhr)

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Moderation: Posts in einen eigenen Thread verschoben.
    » sponsor me via GitHub or PayPal or Revolut

  10. #10
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von bird Beitrag anzeigen
    Ob das der beste Weg ist, kann ich nicht beurteilen ...
    Ich denke, das wäre der beste Weg. Du hättest sonst noch die Möglichkeit all diese Dinge über einen iFrame auszuliefern und dir einen neuen iFrame-Typen zu erzeugen:
    https://github.com/oveleon/contao-co...TEND_IFRAME.md

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 2 (Registrierte Benutzer: 0, Gäste: 2)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •