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 $.

AusdruckResultat auf dieser Seite
window.innerWidth
window.innerWidth
screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
location.href
location.hostname
location.pathname
location.protocol
navigator.appCodeName
navigator.appName
navigator.appVersion
navigator.cookieEnabled
navigator.geolocation
navigator.javaEnabled()
navigator.language
navigator.onLine
navigator.platform
navigator.product
navigator.userAgent
document.baseURI
document.characterSet
document.cookie
document.designMode
document.doctype
document.documentMode
document.documentURI
document.domain
document.implementation
document.inputEncoding
document.lastModified
document.readyState
document.referrer
document.title
document.URL
ip
country

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>

Franz Fiala

Präsident Clubcomputer / Herausgeber PCNEWS bei ClubComputer.at
Franz ist pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreut unser Clubtelefon und Internet Support. Er ist leidenschaftlicher Rapid Wien Fan.

Letzte Artikel von Franz Fiala (Alle anzeigen)

Zur Werkzeugleiste springen