Orientierung-BOM

Wie kann man sich auf einer beliebigen Web-Seite mit einem JavaScript-Programm orientieren?

Eine Webseite kann durch die Objekte, Methoden und Eigenschaften des BOM (Browser Object Model) analysiert werden. Die verfügbaren Objekte sind window, screen, location, history, navigator, cookies und document. Eine genaue Beschreibung aller Eigenschaften und Methoden findet man unter JavaScript Window – The Browser Object Model. Hier werden die Eigenschaften der Objekte vorgestellt.

Die folgende Tabelle nennt in der ersten Spalte die Syntax für die betreffende Eigenschaft und in der zweiten Spalte den Wert, der sich durch den Aufruf dieser Seite ergibt. Die Werte in dieser zweiten Spalte hängen daher auch von den Gegebenheiten bei dem aufrufenden Benutzer ab.

Stellvertretend für alle anderen Zeilen dieser Tabelle ist der Code für die erste Zeile:

<tr><td>window.innerWidth</td><td><span id="window-innerwidth</td></tr>

Die linke Spalte ist ein vorgegebener Text, die rechte Seite ist ein Platzhalter, der zur Laufzeit durch folgenden JavaScript-Code gefüllt wird:

$("#window-innerwidth"),html(window.innerWidth)

Für eine vereinfachte Ansprache wird die jQuery-Bibliothek benutzt, erkennbar am vereinfachten Funktionsaufruf mit $.

Code der Tabelle

Dass der Tabelle die Klassen table und table-sm zugewiesen werden, bewirkt, eine Formatierung mit der Bootstrap-Bibliothek.

<table class="table table-sm"><thead>
<tr><th><tt>Ausdruck</tt></td><td>Resultat auf dieser Seite</span></td></tr>
</thead><tbody>
<tr><td><tt>window.innerWidth</tt></td><td><span id="window-innerwidth"></span></td></tr>
<tr><td><tt>window.innerWidth</tt></td><td><span id="window-innerheight"></span></td></tr>
<tr><td><tt>screen.width</tt></td><td><span id="screen-width"></span></td></tr>
<tr><td><tt>screen.height</tt></td><td><span id="screen-height"></span></td></tr>
<tr><td><tt>screen.availWidth</tt></td><td><span id="screen-availwidth"></td><td></span></td></tr>
<tr><td><tt>screen.availHeight</tt></td><td><span id="screen-availheight"></span></td></tr>
<tr><td><tt>screen.colorDepth</tt></td><td><span id="screen-colordepth"></span></td></tr>
<tr><td><tt>screen.pixelDepth</tt></td><td><span id="screen-pixeldepth"></span></td></tr>
<tr><td><tt>location.href</tt></td><td><span id="location-href"></span></td></tr>
<tr><td><tt>location.hostname</tt></td><td><span id="location-hostname"></span></td></tr>
<tr><td><tt>location.pathname</tt></td><td><span id="location-pathname"></span></td></tr>
<tr><td><tt>location.protocol</tt></td><td><span id="location-protocol"></span></td></tr>
<tr><td><tt>navigator.appCodeName</tt></td><td><span id="navigator-appCodeName"></span></td></tr>
<tr><td><tt>navigator.appName</tt></td><td><span id="navigator-appName"></span></td></tr>
<tr><td><tt>navigator.appVersion</tt></td><td><span id="navigator-appVersion"></span></td></tr>
<tr><td><tt>navigator.cookieEnabled</tt></td><td><span id="navigator-cookieEnabled"></span></td></tr>
<tr><td><tt>navigator.geolocation</tt></td><td><span id="navigator-geolocation"></span></td></tr>
<tr><td><tt>navigator.javaEnabled()</tt></td><td><span id="navigator-javaEnabled"></span></td></tr>
<tr><td><tt>navigator.language</tt></td><td><span id="navigator-language"></span></td></tr>
<tr><td><tt>navigator.onLine</tt></td><td><span id="navigator-onLine"></span></td></tr>
<tr><td><tt>navigator.platform</tt></td><td><span id="navigator-platform"></span></td></tr>
<tr><td><tt>navigator.product</tt></td><td><span id="navigator-product"></span></td></tr>
<tr><td><tt>navigator.userAgent</tt></td><td><span id="navigator-userAgent"></span></td></tr>
<tr><td><tt>document.baseURI</tt></td><td><span id="document-baseURI"></span></td></tr>
<tr><td><tt>document.characterSet</tt></td><td><span id="document-characterSet"></span></td></tr>
<tr><td><tt>document.cookie</tt></td><td><span id="document-cookie"></span></td></tr>
<tr><td><tt>document.designMode</tt></td><td><span id="document-designMode"></span></td></tr>
<tr><td><tt>document.doctype</tt></td><td><span id="document-doctype"></span></td></tr>
<tr><td><tt>document.documentMode</tt></td><td><span id="document-documentMode"></span></td></tr>
<tr><td><tt>document.documentURI</tt></td><td><span id="document-documentURI"></span></td></tr>
<tr><td><tt>document.domain</tt></td><td><span id="document-domain"></span></td></tr>
<tr><td><tt>document.implementation</tt></td><td><span id="document-implementation"></span></td></tr>
<tr><td><tt>document.inputEncoding</tt></td><td><span id="document-inputEncoding"></span></td></tr>
<tr><td><tt>document.lastModified</tt></td><td><span id="document-lastModified"></span></td></tr>
<tr><td><tt>document.readyState</tt></td><td><span id="document-readyState"></span></td></tr>
<tr><td><tt>document.referrer</tt></td><td><span id="document-referrer"></span></td></tr>
<tr><td><tt>document.title</tt></td><td><span id="document-title"></span></td></tr>
<tr><td><tt>document.URL</tt></td><td><span id="document-URL"></span></td></tr>
<tr><td><tt>ip</tt></td><td><span id="id"></span></td></tr>
<tr><td><tt>country</tt></td><td><span id="country"></span></td></tr>
</tbody></table>

Code zum Eintragen der Eigenschaften

Die Auswertung der IP des Benutzers erfordert externe Unterstützung durch einen Serverdienst; Die Auswertung der Geo-Koordinaten des Benutzers erfordert eine Funktion zur Generierung des Textes, beide Funktionen findet man am Ende des Codes.

Die Eigenschaft document. Cookie ergibt eine nicht formatierbare lange Zeile, daher wurde bei allen Vorkommen des Zeichens % ein Zwischenraum eingefügt, damit der lange Text umgebrochen werden kann.

<script>
$(document).ready(function(){
  $("#window-innerwidth").html(window.innerWidth)
  $("#window-innerheight").html(window.innerHeight)
  $("#screen-width").html(screen.width)
  $("#screen-height").html(screen.height)
  $("#screen-availwidth").html(screen.availWidth)
  $("#screen-availheight").html(screen.availHeight)
  $("#screen-colordepth").html(screen.colorDepth)
  $("#screen-pixeldepth").html(screen.pixelDepth)
  $("#location-hostname").html(location.hostname)
  $("#location-href").html(location.href)
  $("#location-pathname").html(location.pathname+"")
  $("#location-protocol").html(location.protocol)
  $("#navigator-appCodeName").html(navigator.appCodeName)
  $("#navigator-appName").html(navigator.appName)
  $("#navigator-appVersion").html(navigator.appVersion)
  $("#navigator-cookieEnabled").html(navigator.cookieEnabled)
  $("#navigator-javaEnabled").html(navigator.javaEnabled()+"")
  $("#navigator-language").html(navigator.language)
  $("#navigator-onLine").html(navigator.onLine)
  $("#navigator-product").html(navigator.product)
  $("#navigator-platform").html(navigator.platform)
  $("#navigator-userAgent").html(navigator.userAgent)
  $("#document-baseURI").html(document.baseURI)
  $("#document-characterSet").html(document.characterSet)
  $("#document-cookie").html(document.cookie.replace(/%/g," %"))
  $("#document-designMode").html(document.designMode+"")
  $("#document-doctype").html(document.doctype+"")
  $("#document-documentMode").html(document.documentMode+"")
  $("#document-documentURI").html(document.documentURI)
  $("#document-domain").html(document.domain)
  $("#document-implementation").html(document.implementation + "")
  $("#document-inputEncoding").html(document.inputEncoding)
  $("#document-lastModified").html(document.lastModified)
  $("#document-readyState").html(document.readyState)
  $("#document-referrer").html(document.referrer)
  $("#document-title").html(document.title)
  $("#document-URL").html(document.URL)
  })
$.getJSON('https://jsonip.com/', function(data) {
  $("#id").html(data.ip)
  $("#country").html(data.country)
})
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition)
} else {
  document.getElementById("navigator-geolocation").innerHTML =
  "Geolocation wird von diesem Browser nicht unterstützt."
}
function showPosition(position) {
  document.getElementById("navigator-geolocation").innerHTML =
  "Breite: " + position.coords.latitude + " Länge: " + position.coords.longitude
}
</script>