Javascript get url parameter

Um an ein eingezubindendes Javascript Parameter zu übergeben gib es zwei Möglichkeiten. Entweder man definiert globale Variablen wie es z.B. bei Google Adsense gemacht wird, oder man übergibt die Werte direkt in der Url des Script-Tags.

Um nun die Nummer und die Hintergrundfarbe eines Widgets an den Loader zu übergeben könnte der Aufruf wie folgt aussehen.

<script type="text/javascript" src="loader.js?id=9021&bgcolor=ff9900"></script>

Um auf die Werte innerhalb von loader.js zuzugreifen bedarf es eines kleinen Tricks, damit sich das Script sozusagen selber findet.

(function() {
  var scripts = document.getElementsByTagName('script');
  var script = scripts[scripts.length - 1];
  if(script != undefined) {
    console.log(script.src);
  }
})();

Es werden alle script Tags im aktuellen Dokument gesucht. Da unser Script zum Zeitpunkt des Einbindens aufgerufen wurde muss es das letzte in der Liste sein. Alle nachfolgenden Scripte sind uns nicht bekannt. Anders würde der Fall liegen, wenn unser Script erst bei document.onload eingebunden worden wäre.

In script.src steht nun unser Querystring loader.js?id=9021&bgcolor=ff9900 und muss nur noch geparst werden.

Mit der Funktion getParamstringAsObject aus diesem Beitrag funktioniert das sehr einfach.

(function() {
  var scripts = document.getElementsByTagName('script');
  var script = scripts[scripts.length - 1];
  if(script != undefined) {
   var params = getParamstringAsObject(script.src.split('?')[1]);
   console.log(params); // => {id:9021, bgcolor:'ff9900'}
  }
})();

Die Variable param ist nun ein anonymes Objekt, was die ursprünglichen Parameter enthält.