117471
117471
Oct 14, 2020, updated at 18:45:25 (UTC)
view3249
view15
0
Goto Top

JavaScript in JavaScript einbinden

GermansolvedQuestionJavaScriptDevelopment
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 face-smile

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 face-sad Offenbar kann man innerhalb eines JavaScript-Blockes kein weiteres JavaScript einbauen.

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

Liebe Grüße,
Jörg
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 612812

Url: https://administrator.de/contentid/612812

Printed on: April 18, 2024 at 15:04 o'clock

15 Comments
Latest comment
Goto Top
Member: eisbein
eisbein Oct 15, 2020 updated at 05:25:25 (UTC)
Goto Top
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 face-wink
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 face-wink

EDIT 2:
bitte entschuldigt meine vermutlich saudämliche Frage.
Es gibt selten dumme Fragen, über die Antworten sollte man richten face-devilish
Mitglied: 117471
117471 Oct 15, 2020 at 06:40:24 (UTC)
Goto Top
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
Member: godlie
Solution godlie Oct 15, 2020 at 06:54:05 (UTC)
Goto Top
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
Mitglied: 117471
117471 Oct 15, 2020 at 07:01:32 (UTC)
Goto Top
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
Member: eisbein
eisbein Oct 15, 2020 updated at 07:13:19 (UTC)
Goto Top
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.
Mitglied: 117471
117471 Oct 15, 2020 updated at 07:16:13 (UTC)
Goto Top
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
Member: eisbein
Solution eisbein Oct 15, 2020 updated at 07:49:32 (UTC)
Goto Top
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.
Mitglied: 117471
117471 Oct 15, 2020 at 08:04:13 (UTC)
Goto Top
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
Member: eisbein
eisbein Oct 15, 2020 updated at 08:51:08 (UTC)
Goto Top
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 &quot; 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
Mitglied: 117471
117471 Oct 15, 2020 at 08:56:22 (UTC)
Goto Top
Hallo,

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

Gruß,
Jörg
Member: eisbein
eisbein Oct 15, 2020 at 09:00:03 (UTC)
Goto Top
1000 Dank! Der alte Sack hat begriffen und Du darfst zuerst spicken - versprochen!

Gerne face-smile

Gruß
eisbein
Mitglied: 117471
117471 Oct 15, 2020 updated at 14:44:24 (UTC)
Goto Top
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 face-sad

Gruß,
Jörg
Member: eisbein
eisbein Oct 15, 2020 at 16:11:29 (UTC)
Goto Top
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
Mitglied: 117471
117471 Oct 15, 2020 at 19:11:20 (UTC)
Goto Top
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
Member: eisbein
eisbein Oct 16, 2020 at 03:53:59 (UTC)
Goto Top
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? face-smile

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

Gruß
eisbein
GermansolvedQuestionJavaScriptDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment