14.10.2020, aktualisiert um 20:45:25 Uhr

3406

JavaScript in JavaScript einbinden

Hallo,

bitte entschuldigt meine vermutlich saudämliche Frage. Der alte Sack lernt gerade "Programmieren" (in JavaScript). Meine letzten HTML-Erfahrungen stammen noch aus einer Zeit, wo es kein CSS gab

Hintergrund: Ich habe auf meiner Homepage ein AddOn installiert, umgebaut und angepasst, mit dem ich ein paar Präferenzen setze:

ob erforderliche Cookies gesetzt werden dürfen
ob Cookies von Google Analytics genutzt werden dürfen
ob "Google Ads" angezeigt werden

Ich bin so weit, dass ich ich die Cookies setzen und wieder auswerten kann *stolz*. Hier ein Auszugt aus meinem (Test-)Code:

<script type="text/javascript">  
var cookieList = (document.cookie) ? document.cookie.split(';') : ;  

console.log ("Auswertung der Cookieeinstellungen");  
for (var i = 0, n = cookieList.length; i != n; ++i) {
  var cookie = cookieList[i].trim();
	
  if ( cookie == 'cookie_erlaubt_erf=allow' ) {  
	  console.log ( 'Erforderliche Cookies sind erlaubt' )  
  } else
  if ( cookie == 'cookie_erlaubt_stat=allow' ) {  
      console.log ( 'Statistikcookies sind erlaubt' )  
  } else
  if ( cookie == 'cookie_erlaubt_ad=allow' ) {  
      console.log ( 'Google Ads werden angezeigt' )  
  }

}
</script>

Das funktioniert perfekt - d.h., die Ausgabe auf der Console stimmt mit den gesetzten Präferenzen überein. Um das Ganze mit Leben zu füllen, möchte ich bei den Statistikcookies den Google Analytics Code einbinden. Dieser sollte laut Google in etwa so aussehen:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"></script>  
<script>
  window.dataLayer = window.dataLayer || ;
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());  

  gtag('config', 'UA-xxxxxxxxx-1');  
</script>

Also habe ich das Ganze mal ganz pragmatisch in meinen funktionierenden Code kopiert. Hier das Ergebnis:

<script type="text/javascript">  
var cookieList = (document.cookie) ? document.cookie.split(';') : ;  

console.log ("Auswertung der Cookieeinstellungen");  
for (var i = 0, n = cookieList.length; i != n; ++i) {
  var cookie = cookieList[i].trim();
	
  if ( cookie == 'cookie_erlaubt_erf=allow' ) {  
        //
        // ---------------------------------------- Anfang eingefügter Google-Code ----------------------------------------
        //
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"></script>  
        <script>
          window.dataLayer = window.dataLayer || ;
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());  
          gtag('config', 'UA-xxxxxxxxx-1');  
        </script>
        //
        // ---------------------------------------- Ende eingefügter Google-Code ----------------------------------------
        //
  } else
  if ( cookie == 'cookie_erlaubt_stat=allow' ) {  
      console.log ( 'Statistikcookies sind erlaubt' )  
  } else
  if ( cookie == 'cookie_erlaubt_ad=allow' ) {  
      console.log ( 'Google Ads werden angezeigt' )  
  }

}
</script>

...und genau das funktioniert nicht

Offenbar kann man innerhalb eines JavaScript-Blockes kein weiteres JavaScript einbauen.

Was wäre denn hier die "Best practice"?

Liebe Grüße,
Jörg

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 612812

Url: https://administrator.de/forum/javascript-in-javascript-einbinden-612812.html

Ausgedruckt am: 07.04.2025 um 22:04 Uhr

15 Kommentare

Neuester Kommentar

Guten Morgen,

Ich würde nach deinem Script ein DIV mit id="cookie" einfügen.

<div id="cookie"></div>  

und deinen gewünschten Javascript-Code dynamisch da rein schreiben (Zeile 12-19)

<script type="text/javascript">  
var cookieList = (document.cookie) ? document.cookie.split(';') : ;  

console.log ("Auswertung der Cookieeinstellungen");  
for (var i = 0, n = cookieList.length; i != n; ++i) {
  var cookie = cookieList[i].trim();
	
  if ( cookie == 'cookie_erlaubt_erf=allow' ) {  
        //
        // ---------------------------------------- Anfang eingefügter Google-Code ----------------------------------------
        //
       document.getElementById("cookie").innerHTML='<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"></script>  

          <script>
          window.dataLayer = window.dataLayer || ;
          function gtag(){dataLayer.push(arguments);}
          gtag("js", new Date());  
          gtag("config", "UA-xxxxxxxxx-1");  
          </script>';  

        //
        // ---------------------------------------- Ende eingefügter Google-Code ----------------------------------------
        //
  } else
  if ( cookie == 'cookie_erlaubt_stat=allow' ) {  
      console.log ( 'Statistikcookies sind erlaubt' )  
  } else
  if ( cookie == 'cookie_erlaubt_ad=allow' ) {  
      console.log ( 'Google Ads werden angezeigt' )  
  }

}
</script>

Beachte, dass ich den Code als String an innerHTML übergebe und daher ein ' an Anfang und Ende gesetzt habe, da du " bereits verwendest

Achte darauf diese Anführungszeichen nicht zu mischen ... (Zeile 17,18)

Habe es aber nicht getestet ...

Gruß
eisbein

EDIT:

Offenbar kann man innerhalb eines JavaScript-Blockes kein weiteres JavaScript einbauen.

Der <script>-Tag ist hier das Problem, da doppelt/verschachtelt

EDIT 2:

bitte entschuldigt meine vermutlich saudämliche Frage.

Es gibt selten dumme Fragen, über die Antworten sollte man richten

Hallo,

ich dachte, <div> steht immer im Body und <script> immer im Head?

Oder schreibe ich das <div> auch in den Head?

Gruß,
Jörg

Hallo,

ein <div> gehört in den Body, ein Script kann im Header sein oder auch im Body.

Der Unterschied beim Javascript ist folgender:

Wird das Javascript im Header eingebunden, so wird es am Anfang des Render Prozesses einer Seite ausgeführt, wird es im Body ( am besten ganz unten vor dem schliesenden HTML ), so wird es erst am Ende des Render Prozesses ausgeführt.

Willst du innerhalb deines Javascriptes etwas auf der Seite verändern, musst du warten bis die Seite gerendert ist <-- ergeo sollte das Script ans Ende vom Body.

Hast du nur Funktionen definiert, welche aufgerufen werden aufgrund einer Userinteraktion ( Klick, Hover, Scroll ), kannst du dein Script auch im Header einbinden. Es gibt hier aber noch eine Ausnahme, du kannst dein Script im Header einbinden, aber erst am Ende des Render Prozesses ausführen. Siehe document.ready

Hallo,

d.h., wenn ich das <div> direkt vor das Script und beides in den Body schreibe, bin ich „safe“?

Ich mache das über ein Wordpress-AddOn und habe daher nur bedingt Einfluss auf die Positionierung; da ich nicht im Template herummalen will.

Gruß,
Jörg

wenn ich das <div> direkt vor das Script und beides in den Body schreibe, bin ich „safe“?

Was bedeutet "safe"?

Wo steht dein Javascript? - im Header? - dann pack das <div> gleich unter <body>

Gruß
eisbein

Edit:
In deinem HP-Quellcode steht dein Cookie-Code am Ende und im <body> - nach <footer> - also kannst du das <div> gleich nach deinem <script> setzen bzw. den Code direkt mit

document.body.innerHTML = document.body.innerHTML + " -- dein JavaScript --- ";

hinten anhängen.

Hallo,

„safe“ bedeutet: Es funktioniert z.B. auch dann, wenn sich mal etwas verzögert...

in welchem Abschnitt (Head oder Body) das JavaScript steht, kann ich mir aussuchen.

Mein AddOn hat so eine Art Injektor für den Head und den Body. Mit dem möchte ich einmal das Script und einmal das <div> injizieren. Oder halt beides auf einmal...?!?

Das AddOn schreibt seine Einträge immer ans Ende von Head oder Body. Es sei denn, ich pfusche im Template.

Gruß,
Jörg

in welchem Abschnitt (Head oder Body) das JavaScript steht, kann ich mir aussuchen.

Dann würde ich Head bevorzugen und deinen Google JavaScript Code direkt mit

document.body.innerHTML = document.body.innerHTML + " -- dein JavaScript --- ";

in den body schreiben, dann benötigst du kein extra <div> .

Edit:
Zum besseren Verständtnis:

<script type="text/javascript">  
var cookieList = (document.cookie) ? document.cookie.split(';') : ;  

console.log ("Auswertung der Cookieeinstellungen");  
for (var i = 0, n = cookieList.length; i != n; ++i) {
  var cookie = cookieList[i].trim();
	
  if ( cookie == 'cookie_erlaubt_erf=allow' ) {  
        //
        // ---------------------------------------- Anfang eingefügter Google-Code ----------------------------------------
        //
      document.body.innerHTML = document.body.innerHTML + '<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"></script>  

          <script>
          window.dataLayer = window.dataLayer || ;
          function gtag(){dataLayer.push(arguments);}
          gtag("js", new Date());  
          gtag("config", "UA-xxxxxxxxx-1");  
          </script>';  

        //
        // ---------------------------------------- Ende eingefügter Google-Code ----------------------------------------
        //
  } else
  if ( cookie == 'cookie_erlaubt_stat=allow' ) {  
      console.log ( 'Statistikcookies sind erlaubt' )  
  } else
  if ( cookie == 'cookie_erlaubt_ad=allow' ) {  
      console.log ( 'Google Ads werden angezeigt' )  
  }

}
</script>

in den HEAD und hier wird in Zeile 12 dein Google-Code in den BODY geschrieben.

Hallo,

d.h. - pragmatisch ausgedrückt - hängst Du den Scriptcode mit dem Pluszeichen einfach an den Body ran, wobei die doppelten Anführungszeichen verhindern, dass die Anführungszeichen im Scriptcode als Ende des angehängten Codes interpretiert werden?

Gruß,
Jörg

Zitat von @117471:

Hallo,

d.h. - pragmatisch ausgedrückt - hängst Du den Scriptcode mit dem Pluszeichen einfach an den Body ran, wobei die doppelten Anführungszeichen verhindern, dass die Anführungszeichen im Scriptcode als Ende des angehängten Codes interpretiert werden?

Ja

Ich hänge den Scriptcode mit dem Pluszeichen als String an den Body ran, die Anführungszeichen deklarieren den String, wobei man hier aufpassen muss , dass man ' und " im String nicht mischt !!
Daher wäre es ideal im String vorkommende Anführungsziechen mittels \u0022 oder " zu escapen.
https://www.mediaevent.de/javascript/Javascript-Strings.html
Wir reden also nicht von Anführungszeichen - sondern von Hochkommas :-P

In deinem Fall:

document.body.innerHTML = document.body.innerHTML + '<script async src=\u0022https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1\u0022></script>  

          <script>
          window.dataLayer = window.dataLayer || ;
          function gtag(){dataLayer.push(arguments);}
          gtag(\u0022js\u0022, new Date());
          gtag(\u0022config\u0022,\u0022UA-xxxxxxxxx-1\u0022);
          </script>';  

Gruß
eisbein

Hallo,

1000 Dank! Der alte Sack hat begriffen und Du darfst zuerst spicken - versprochen!

Gruß,
Jörg

1000 Dank! Der alte Sack hat begriffen und Du darfst zuerst spicken - versprochen!

Gerne

Gruß
eisbein

Hallo,

das funktioniert so nicht. Offenbar ist es nicht möglich, auf diese Weise JavaScript-Code nachzuladen. Ich habe es mal auf ein Beispiel reduziert:

console.log ("Auswertung der Cookieeinstellungen");  

var cookieList = (document.cookie) ? document.cookie.split(';') : ;  
for (var i = 0, n = cookieList.length; i != n; ++i) {
  var cookie = cookieList[i].trim();
	
  if ( cookie == 'cookie_erlaubt_erf=allow' ) {  
  } else
  if ( cookie == 'cookie_erlaubt_stat=allow' ) {  
    document.body.innerHTML = document.body.innerHTML + '<p>"Testabsatz"</p><script type="text/javascript">console.log ("Dies ist der Konsolentext");</script>';  
  } else
  if ( cookie == 'cookie_erlaubt_ad=allow' ) {  
  }

}

Das Wort "Testabsatz" wird mit Anführungszeichen fehlerfrei ausgegeben. Der Text auf der Konsole müsste eigentlich ohne Anführungszeichen ausgegeben werden. Dieser erscheint aber gar nicht

Gruß,
Jörg

Wie gesagt, ich habe es nicht getestet.

console.log ("Auswertung der Cookieeinstellungen");  

var cookieList = (document.cookie) ? document.cookie.split(';') : ;  
for (var i = 0, n = cookieList.length; i != n; ++i) {
  var cookie = cookieList[i].trim();
	
  if ( cookie == 'cookie_erlaubt_erf=allow' ) {  
  } else
  if ( cookie == 'cookie_erlaubt_stat=allow' ) {  
   var g = document.createElement('script');  
var s = document.getElementsByTagName('script');  
g.text = "console.log (\"Dies ist der Konsolentext\");";  
s.parentNode.insertBefore(g, s);

  } else
  if ( cookie == 'cookie_erlaubt_ad=allow' ) {  
  }

}

Hier wird nun dynamisch ein <script> erstellt und mit Text befüllt.

Gruß
eisbein

Hallo,

weißt Du was? Ich frage mich gerade ernsthaft, warum ich das nicht mit PHP mache?

Eigentlich brauche ich doch nur im Header - abhängig von den Cookies - den Google-Code mit echo ausgeben, oder?

Gruß,
Jörg

Guten Morgen,

weißt Du was? Ich frage mich gerade ernsthaft, warum ich das nicht mit PHP mache?

Warum einfach, wenn es auch kompliziert geht?

PHP wäre natürlich um einiges besser.

Dennoch habe ich mit auf deine JavaScript-Frage eingelassen und denke mit createElement sollte es funktionieren. Man lernt immer wieder dazu

Gruß
eisbein

gelöst Frage JavaScript Entwicklung

Heiß diskutiert