blog.bartlweb - a technologist's external brain

Thema: JavaScript

Browser mittels JavaScript in den Vollbildmodus versetzen

Das unten stehende JS-Snippet versetzt den Browser in den Vollbildmodus und funktioniert in allen gängigen Browsern (Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari).

JavaScript-Code

function fullscreen(){
    elem = document.getElementsByTagName("body")[0];
   
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement){
        if(elem.requestFullscreen){
            elem.requestFullscreen();
        } else if(elem.msRequestFullscreen){
            elem.msRequestFullscreen();
        } else if(elem.mozRequestFullScreen){
            elem.mozRequestFullScreen();
        } else if(elem.webkitRequestFullscreen){
            elem.webkitRequestFullscreen(elem.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if(document.exitFullscreen){
            document.exitFullscreen();
        } else if(document.msExitFullscreen){
            document.msExitFullscreen();
        } else if(document.mozCancelFullScreen){
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen){
            document.webkitExitFullscreen();
        }
    }
}

Einschränkungen

Bei der Entwicklung von Websites, die im Vollbildmodus angezeigt werden sollen, sind die folgenden beiden Dinge zu beachten:

Klick und Doppelklick-Event auf dasselbe Element per JS abfangen

Die folgende jQuery-Funktion von Jacek Becela (http://gist.github.com/399624) erlaubt das Abfangen von Klick- und Doppelklick-Events auf ein Element. Werden beide Events mit den jQuery-Standardfunktionen gesetzt, so wird das Klick-Event auch bei Doppelklicks ausgeführt. Sollen beide Events getrennt behandelt werden hilft der folgende Code. Dieser wertet in <= 300ms hintereinanderfolgende Klicks als Doppelklick alle anderen als einfache Klicks.

Aufruf

jQuery("a.doubleclick").single_double_click(function(){
  alert("single click");
}, function(){
  alert("double click");
});

Code

// Author: Jacek Becela
// Source: http://gist.github.com/399624
// License: MIT
 
jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Funktionsaufruf mit Parametern für setTimeout

Des öfteren würde man gerne einer per setTimeout oder setInterval aufgerufenen Funktion Parameter mitübergeben. Das folgende Konstrukt hilft dabei.

setTimeout(
   function(){
      ownFunction(param1, param2);
   },1000
);

Cross-Site Scripting (XSS) mit Hilfe von iFrames

Will man zwischen einem iFrame und der Hauptseite Daten mittels JavaScript austauschen oder Funktionen auf der anderen Seite aufrufen benötigt man den ansatz von Cross-Site Scripting (XSS).

Dabei gibt es allerdings von Anfang an folgende Einschränkungen:

  • Die Hauptseite und der iFrame müssen von der selben Domain aufgerufen werden.
  • Dabei ist es auch nicht erlaubt zwischen Subdomains zu kommunizieren
  • und zuletzt muss auch der Port (also http/https) übereinstimmen.

Erfüllt man diese Bedingungen steht einem Regen austausch nichts mehr im Wege. Dabei kann dann aus dem iFrame heraus eine Funktion der Hauptseite mittels folgendem Code aufgerufen werden:

vorbelegtes Eingabefeld bei Focus automatisch leeren

Gerade bei Suchfeldern ist das Eingabefeld gerne mit dem Wort "Suchen" vorbefüllt. Damit beim Klicken in das Feld der Text automatisch verschwindet bzw. beim Verlassen wieder hergestellt wird und dabei der Text auch noch direkt aus dem HTML-Code ausgelesen wird gibt es folgendes Code-Snippet:

inputtext = $("input#search").val();
jQuery("input#search").focus(function() {
if(this.value==inputtext) this.value='';
});
jQuery("input#search").blur(function() {
if(this.value=='') this.value=inputtext;
});

Browser und Betriebssystem per JavaScript ermitteln

Oft werden für verschiedene Browser unterschiedliche JS-Befehle benötigt oder es muss unterschiedlich viel mit JS realisiert werden, hier hilft das Skript "Browser detect" mit dem sich nicht nur Browser-Typ und Version abfragen lassen, sondern auch noch das verwendete Betriebssystem.

Anwendung

  • Initialisieren
    BrowserDetect.init();
  • Browser-Typ abfragen
    BrowserDetect.browser
  • Browser-Version abfragen
    BrowserDetect.version
  • Betriebssystem abfrage
    BrowserDetect.OS

Rückgabewerte

  • Browser
    OmniWeb, Safari, Opera, iCab, Konqueror, Firefox, Camino, Netscape, Explorer, Mozilla
  • Version
    z.B.: 6 oder 7 für IE6 bzw. IE7
  • OS
    Windows, Mac, Linux

Skript

Zu finden ist das Skript sammt umfangreicher Dokumentation unter: http://www.quirksmode.org/js/detect.html

Status einer Checkbox mit jQuery ermitteln

Am einfachsten lassen sich Checkboxen in jQuery mit der Abfrage bzw. dem Schreiben des Attributes checked behandeln (checked="" bzw. checked="checked"). Diese Schreibweise ist außerdem xHTML konform.

if( jQuery("#checkbox").attr("checked") ) {
  ...
}

jQuery("#checkbox").attr("checked", "checked");

Die selbe Vorgehensweise funktioniert übrigens auch mit Select-Optionen und selected="" bzw. selected="selected".

PopUp Parser mit jQuery

PopUps sind generell eine eher lästige Sache, gerade in Applikationen aber manchmal erwünscht. Generell lassen sich PopUps nur per JavaScript öffnen. Damit unsere Webseite aber auch ohne JavaScript funktionstüchtig wird ist es sinnvoll den PopUp-Aufruf erst mittels JavaScript zuzuweisen.

Das folgende Snippet fügt allen Links mit der Klasse "popup_link" den benötigten Funktion hinzu:

$(".popup_link").click(function(){
  fenster = window.open(this.href, "popup", "width=550,height=500,status=no,scrollbars=yes,resizable=yes");
  fenster.focus();
  return false;
});

Alle externen Links automatisch in neuem Fenster öffnen

Externe Links möchte man meistens in einem neuen Fenster öffnen. Gerade bei Systemen mit Redakteuren wird das Setzen des entspechenden target-Attributes aber gerne vergessen. Das untere JavaScript fügt allen absoluten Links das Attribut target="_blank" hinzu. Achtung: interne Links müssen daher immer relativ angegben werden.

jQuery("a").each(function () {
  if ( jQuery(this).attr("href").indexOf("http://") == 0 || jQuery(this).attr("href").indexOf("https://") == 0 ) {
    jQuery(this).attr("target","_blank");
  }
});

Karte von GoogleMaps wird nicht vollständig geladen

Wenn bei GoogleMaps die Karte nicht vollständig geladen wird und immer wieder Quadrate der Karte fehlen, kann eine mögliche Lösung die Angabe einer absoluten Größen beim erzeugen der Map sein. Dazu muss das erzeugende JavaScript modifiziert werden, der Aufruf könnte dann wie folgt aussehen:

var map = new GMap2(document.getElementById("map"),{size : {width:575,height:500}, mapTypes : [G_NORMAL_MAP,G_HYBRID_MAP,G_SATELLITE_MAP]});