Share via

  • Artikel

3 Zeilen Code: Internet Explorer 9 und Windows 7

Erstellt von: Oliver Scheer - 22.11.2010

Einleitung

Der neue Internet Explorer 9 beinhaltet die Möglichkeit Windows 7 Funktionen der Taskleiste zu verwenden. Dabei benötigt man für die einzelnen Funktionen maximal drei Zeilen Code. Dieser Beitrag stellt diese Funktionen vor und zeigt, wie man diese in seine eigenen Webseiten integrieren kann.

Festlegen, dass die Webseite im Standard-Modus dargestellt werden soll

Damit der Internet Explorer die Seite im Standard-Modus darstellt, welche zur bestmöglichen Darstellung beiträgt, muss man der Webseite dies mitteilen. Macht man dies nicht, versuchen der Internet Explorer 9 und andere Browser, die Webseite nach eigener Einschätzung darzustellen.

Die obige Darstellung zeigt den Internet Explorer, wie er eine Seite darstellt, wenn man keinen Standard auswählt.

Der Sourcecode der Webseite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Keine Festlegung auf Standard</title>
</head>
<body>
    <p>…</p>
</body>
</html>

Die folgende Darstellung zeigt, wie es aussehen kann, wenn der Browser exakt weiß, wie die Seite zu rendern ist.

Dazu benötigt man lediglich eine weitere Zeile im HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Festlegung auf Standard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
</head>
<body>
    <p>…</p>
</body>
</html>

Definieren eines Symbols für die Webseite

Viele Webseiten zeigen neben der Adresse auch ein eigenes Symbol an.  Um diese Funktion in seiner eigenen Webseite ebenfalls zu ermöglichen, ist ebenfalls nur eine Zeile HTML-Code notwendig.

Der Source-Code der oben dargestellten Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Festlegung auf Standard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link href="/icons/site.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <p>…</p>
</body>
</html>

Anheften einer Webseite an die Startleiste von Windows 7

Eines der spannendsten neuen Funktionen im Internet Explorer 9 ist die Möglichkeit Webseiten an die Startleiste in Windows 7 anzuheften. Das macht man einfach, in dem man das Symbol der Webseite neben der eigentlichen Adresse, oder aber den Karteireiter der Webseite in die Startleiste zieht.

Anschließend hat man die Webseite auf einen Klick parat in der Startleiste

Dies kann man übrigens mit jeder Webseite machen. Dazu ist keinerlei HTML-Code notwendig.

Wenn man die Webseite direkt aus der Startleiste startet stehen einem direkt noch viel mehr Funktionen zur Verfügung. Dafür werden im folgendem einige Beispiele demonstriert. Keine dieser Funktionen sorgt dafür, dass eine Webseite nicht in anderen Browsern dargestellt werden kann. Dennoch sollte man vorab prüfen ob die Webseite gerade im Internet Explorer 9 angezeigt wird oder nicht. Je nach dem kann man die Funktionen einfach „hinzuschalten“.

Erkennen, dass die Seite im Internet Explorer 9 ausgeführt wird

Wie erkennt man am einfachsten ob die Seite gerade im Internet Explorer 9 oder in einem anderen Browser angezeigt wird.

Das folgende Beispiel zeigt ein Skript zur Erkennung des Internet Explorer 9.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Wird diese Seite im Internet Explorer 9 dargestellt?</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script type="text/javascript">
        function isIe9() {
            var version = getInternetExplorerVersion();
            if (version >= 9) {
                return true;
            }
            else {
                return false;
            }
        }
        function getInternetExplorerVersion() {
            var rv = -1; // Return value assumes failure.
            if (navigator.appName == 'Microsoft Internet Explorer') {
                var ua = navigator.userAgent;
                var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
                if (re.exec(ua) != null)
                    rv = parseFloat(RegExp.$1);
            }
            return rv;
        }
    </script>
</head>
<body>
    <p>
        <input id="Button1" type="button" value="button" onclick="javascript:alert(isIe9());" />
    </p>
</body>
</html>

Diese Seite macht nichts anderes als einen Button darzustellen. Betätigt man diesen, erscheint eine Meldung die angibt, ob die Seite im Internet Explorer angezeigt wird, oder ob man einen anderen Browser benutzt.

Erkennen das man im „Site-Mode“ ist

Was ist der „Site-Mode“? Als Site-Mode bezeichnet man den Modus, wenn man eine Anwendung aus der Startleiste heraus startet. Dadurch kann eine Webseite zusätzliche Funktionen der Windows Startleiste verwenden.

Eine einfache Möglichkeit zu erkennen, ob die Seite im Site-Mode betrieben wird, ist ein kleines JavaScript-Snippet:

function isSiteMode() {
    try {
        if (window.external.msIsSiteMode()) {
            return true;
        }
        else {
            return false;
        }
    }
    catch (e) {
        return false;
    }
}

Diese Funktion liefert „true“ zurück, wenn die Seite im Site-Mode gestartet wurde. Andernfalls wird „false“ zurück geliefert.

Diese Methode wird in den beigefügten Beispielen verwendet, um die zusätzlichen Funktionen zu aktivieren.

Anpassen der Seiten-Darstellung

Im Site-Mode hat man die Möglichkeit, die Darstellung der eigenen Seite anzupassen. Man kann definieren, wie Navigationsbuttons des Internet Explorer 9 aussehen, wie groß das Fenster beim Starten der Seite sein soll und wie welcher Name und Tooltip in der Startleiste erscheinen soll.

Der dazu notwendige HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Festlegung auf Standard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link href="/icons/site.ico" rel="shortcut icon" type="image/x-icon" />
    
    <meta name="application-name" content="Sample Site Mode Application"/>
    <meta name="msapplication-navbutton-color" content="lightgreen" />
    <meta name="msapplication-tooltip" content="Starte die Anwendung" />
    <meta name="msapplication-starturl" content="/default.htm" />
    <meta name="msapplication-window" content="width=800;height=600" />
</head>
<body>
    <p>…</p>
</body>
</html>

Der Parameter msapplicatipon-navbutton-color definiert die Hauptfarbe der Navigationsbuttons. Die Schreibweise für Farben kann nach Namen oder Hexadecimal-Code erfolgen.

Mit dem Parameter msapplication-navbutton-color kann festgelegt werden, welcher Text als Tooltip über dem Symbol der angehefteten Webseite erscheinen soll.

Die URL der Seite, die gestartet werden soll, kann mit dem Parameter msapplication-starturl definiert werden. Wichtig hierbei ist, dass man jede beliebige Seite innerhalb der aktuellen Website und auch Links innerhalb einer Seite definiert werden können.

Der Parameter msapplication-window legt fest, wie groß das Fenster sein soll, wenn die Anwendung gestartet wird.

Erstellen von Einträgen in der Sprungliste des Kontextmenüs

Bisher befanden sich im Kontextmenü nur allgemeine Funktionen zu Programmen, wie z.B. Schließen und Verschieben. Seit Windows 7 hat man die Möglichkeit in dieses Kontextmenü eigene Menüpunkte zu integrieren.

Die genaue Bezeichnung für solche Funktionen lautet "Sprunglisten". Damit lassen sich Funktionen direkt innerhalb einer bestimmten Website anspringen.  Die einzelnen Einträge innerhalb einer Sprungliste können auch in Kategorien gruppiert und mit einzelnen Symbolen versehen werden. Dafür ist der folgende HTML-Code notwendig:

window.external.msSiteModeCreateJumplist('Meine Site');
window.external.msSiteModeAddJumpListItem('Funktion 4', '07_jumplist.htm', '/icons/add.ico');
window.external.msSiteModeAddJumpListItem('Funktion 3', '07_jumplist.htm', '/icons/delete.ico');
window.external.msSiteModeAddJumpListItem('Funktion 2', '07_jumplist.htm', '/icons/refresh.ico');
window.external.msSiteModeAddJumpListItem('Funktion 1', '07_jumplist.htm', '/icons/search.ico');
window.external.msSiteModeShowJumplist();

Die Funktion window.external.msSiteModeCreateJumplist erzeigt eine neue Sprungliste. Die Funktion window.external.msSiteModeAddJumpListItem fügt einen neuen Eintrag mit einer Zieladresse und einem Symbol hinzu.

Die Funktion window.external.msSiteModeShowJumplist aktualisiert die Taskleiste.

Anzeigen von Buttons im Overlay

Eine Funktion, die man vom Mediaplayer her kennt ist die Möglichkeit, Buttons in der Anwendungsvorschau der Taskleiste einbauen zu können. So kann man z.B. den Mediaplayer steuern (nächstes oder vorheriges Lied und Start/Stop), in dem man mit der Maus auf das Symbol in der Symbolleiste geht und sich die Vorschau der Anwendung ansieht. Dadurch muss man nicht unbedingt die gesamte Anwendung in den Vordergrund holen.

Diese Möglichkeit hat auch jetzt eine Webseite im Internet Explorer 9 unter Windows 7.

Kompatibilität mit anderen Browsern

Die neuen Funktionalitäten stehen nur im Internet Explorer zur Verfügung. Allerdings lassen sich die Webseiten ohne Probleme auch, ohne die neue Funktionalität, in anderen Browsern darstellen.

Zusammenfassung

Basiert noch auf der Beta Version des Internet Explorer 9, aber wird auch in der finalen Version enthalten sein.

Pinned Sites: https://msdn.microsoft.com/de-de/library/de-de/gg131029.aspx

Video