Windows 7

Blog von Microsoft Deutschland

Integration von Internet Explorer 9 in Windows 7

Integration von Internet Explorer 9 in Windows 7

  • Comments 4
  • Likes

Gastposting von Oliver Scheer, Developer Evangelist - Windows, Silverlight und UI-Technologien bei der Microsoft Deutschland GmbH.

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.

Video-Demonstration

Get Microsoft Silverlight

Webseite im Standard-Modus darstellen

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, versucht der Internet Explorer 9 und andere Browser, die Webseite nach eigener Einschätzung darzustellen:

image

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

Der Sourcecode der Webseite:

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2: <html xmlns="http://www.w3.org/1999/xhtml">
  3:   <head>
  4:     <title>Keine Festlegung auf Standard</title>
  5:   </head>
  6:   <body>
  7:     <p>...</p>
  8:   </body>
  9: </html>

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

image

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

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2: <html xmlns="http://www.w3.org/1999/xhtml">
  3:   <head>
  4:     <title>Festlegung auf Standard</title>
  5:     <meta http-equiv="X-UA-Compatible" content="IE=9" />
  6:   </head>
  7:   <body>
  8:     <p>...</p>
  9:   </body>
 10: </html>
Definieren eines Symbols für die Webseite

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

image

Der Source-Code der oben dargestellten Seite:

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2: <html xmlns="http://www.w3.org/1999/xhtml">
  3:   <head>
  4:     <title>Festlegung auf Standard</title>
  5:     <meta http-equiv="X-UA-Compatible" content="IE=9" />
  6:     <link href="/icons/site.ico" rel="shortcut icon" type="image/x-icon" />
  7:   </head>
  8:   <body>
  9:     <p>...</p>
 10:   </body>
 11: </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 funktioniert übrigens mit jeder Webseite, ohne den HTML-Quelltext zu verändern. Wie geht das? Man zieht einfach das Symbol der Webseite neben der eigentlichen Adresse (oder aber den Karteireiter der Webseite) auf die Taskleiste:

image

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

image

Wenn man die Webseite direkt aus der Startleiste startet, stehen einem 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“.

Internet Explorer 9 erkennen

Wie erkennt man am einfachsten ob die Webseite gerade im Internet Explorer 9 oder in einem anderen Browser angezeigt wird? Das folgende Beispiel zeigt ein Skript zur Erkennung des Internet Explorer 9.

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2: <html xmlns="http://www.w3.org/1999/xhtml">
  3: <head>
  4:   <title>Wird diese Seite im Internet Explorer 9 dargestellt?</title>
  5:   <meta http-equiv="X-UA-Compatible" content="IE=9" />
  6:   <script type="text/javascript">
  7:     function isIe9() {
  8:       var version = getInternetExplorerVersion();
  9:       if (version >= 9) {
 10:         return true;
 11:         }
 12:       else {
 13:         return false;
 14:       }
 15:     }
 16:     function getInternetExplorerVersion() {
 17:       var rv = -1; // Return value assumes failure.
 18:       if (navigator.appName == 'Microsoft Internet Explorer') {
 19:         var ua = navigator.userAgent;
 20:         var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
 21:         if (re.exec(ua) != null)
 22:         rv = parseFloat(RegExp.$1);
 23:         }
 24:       return rv;
 25:     }
 26:   </script>
 27:   </head>
 28:   <body>
 29:     <p>
 30:       <input id="Button1" type="button" value="button" onclick="BLOCKED SCRIPTalert(isIe9());" />
 31:     </p>
 32:   </body>
 33: </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.

Site-Mode erkennen

Was ist der Site-Mode? Als Site-Mode bezeichnet man den Modus, wenn man eine Webseite als Anwendung direkt aus der Taskleiste heraus startet. Dadurch kann eine Webseite zusätzliche Funktionen der Windows-Taskleiste verwenden. Eine einfache Möglichkeit zu erkennen, ob die Webseite im Site-Mode betrieben wird, ist ein kleines JavaScript-Snippet:

  1: function isSiteMode() {
  2:   try {
  3:     if (window.external.msIsSiteMode()) {
  4:       return true;
  5:     }
  6:     else {
  7:       return false;
  8:     }
  9:   }
 10: catch (e) {
 11:   return false;
 12:   }
 13: }

Diese Funktion liefert true zurück, wenn die Seite im Site-Mode gestartet wurde. Andernfalls wird false zurückgeliefert. Diese Methode wird in den beigefügten Beispielen verwendet, um die zusätzlichen Funktionen zu aktivieren.

Anpassen der Darstellung der Webseite

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.

image

Der dazu notwendige HTML-Code:

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

Der Parameter msapplication-navbutton-color definiert die Hauptfarbe der Navigationsbuttons. Die Schreibweise für Farben kann nach Namen oder Hexadecimal-Code erfolgen. Mit dem Parameter msapplication-navbutton-tooltip kann festgelegt werden, welcher Text als Tooltip über dem Symbol der angehefteten Webseite erscheinen soll.

Die URL der Webseite, die gestartet werden soll, kann mit dem Parameter msapplication-starturl definiert werden. Wichtig hierbei ist, dass man jede beliebige Webseite 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 zum Beispiel Schließen und Verschieben. Seit Windows 7 hat man die Möglichkeit, in dieses Kontextmenü eigene Menüpunkte zu integrieren:

image

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.

Sprunglisten können auf zwei Arten erstellt werden. Durch Meta-Tags können Sprunglisten direkt erzeugt werden. Verwendet man JavaScript, um die Einträge der Sprungliste zu erzeugen, so kann man dies dynamisch zur Laufzeit machen.

Die Meta-Tag Variante sieht wie folgt aus:

  1: <META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>
  2: <META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/>

Die JavaScript-Variante sieht wie folgt aus:

  1: window.external.msSiteModeCreateJumplist('Meine Site');
  2: window.external.msSiteModeAddJumpListItem('Funktion 4', '07_jumplist.htm', '/icons/add.ico');
  3: window.external.msSiteModeAddJumpListItem('Funktion 3', '07_jumplist.htm', '/icons/delete.ico');
  4: window.external.msSiteModeAddJumpListItem('Funktion 2', '07_jumplist.htm', '/icons/refresh.ico');
  5: window.external.msSiteModeAddJumpListItem('Funktion 1', '07_jumplist.htm', '/icons/search.ico');
  6: 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 Windows Media Player her kennt, ist die Möglichkeit, Buttons in der Anwendungsvorschau der Taskleiste einbauen zu können. So kann man zum Beispiel den Media Player steuern (nächstes oder vorheriges Lied und Start/Stop), in dem man mit der Maus auf das jeweilige Symbol in dem Vorschaubild über der Taskleiste klickt. Man muss dabei nicht unbedingt die gesamte Anwendung in den Vordergrund holen:

image

Diese Möglichkeit hat auch jetzt eine Webseite im Internet Explorer 9 unter Windows 7. Der JavaScript-Code sieht dazu wie folgt aus:

  1: <script type="text/javascript">
  2:   function createThumbnailButtons() {
  3:     if (!isSiteMode()) {
  4:       return;
  5:     }
  6:   alert('createThumbnailButtons');
  7:   btn1 = window.external.msSiteModeAddThumbBarButton('/icons/add.ico', 'button 1');
  8:   btn2 = window.external.msSiteModeAddThumbBarButton('/icons/delete.ico', 'button 2');
  9:   btn3 = window.external.msSiteModeAddThumbBarButton('/icons/edit.ico', 'button 3');
 10:   window.external.msSiteModeShowThumbBar();
 11:   document.addEventListener('msthumbnailclick', handler1, false);
 12:   }
 13: </script>
Kompatibilität mit anderen Browsern

Alle Beispiele in diesem Gastbeitrag basiert auf der Beta-Version des Internet Explorer 9 und stehen nur unter Windows 7 zur Verfügung. Allerdings lassen sich die Webseiten ohne Probleme – aber ohne die neue Funktionalitäten - in anderen Browsern darstellen.

Weiterführende Links

Der Sourcecode für das einzelne Projekt kann hier heruntergeladen werden:

Dieses und weitere Beispiele befinden sich hier:

Comments
  • Leider lassen sich durch die neue Funktion, einzelne Websites an die Taskleiste zu pinnen, keine Webseiten mehr in die Jumpliste des IE9Beta ziehen und dort anpinnen. Bitte lasst das wieder zu.

    Bitte folgendes im Text korrigieren:

    "Der Parameter msapplicatipon-navbutton-color definiert die Hauptfarbe [...]" - da ist wohl ein p zuviel

    "Mit dem Parameter msapplication-navbutton-color kann festgelegt werden, welcher Text [...]" - sollte hier bestimmt nicht COLOR sein

  • Hallo Rico,

    vielen Dank für das Feedback. Ich habe die Fehler korrigiert.

    VG, Daniel

  • Hallo Daniel,

    soweit funktioniert die Integration sehr gut. Bis auf den Punkt „Die Website im Standard-Modus darstellen“:

    <meta http-equiv="X-UA-Compatible" content="IE=9" />

    Die Implementierung in die php stellt kein Problem. In der Beta des IE9 wird der Kompatibilitäts-Button nicht mehr angezeigt, bzw. im Menü Seite ausgegraut. Soweit so gut.

    Da ich mit dem Windows Live Writer 2011 blogge , wird nun, wenn ich das Design erneut herunterlade, im Bearbeiten-Modus das Design nicht mehr geladen.

    Musste diese sehr gute neue Funktion wieder herausnehmen. Schade. Gibt es den eine Lösung? Wird der WLW2011 auch die neuen Funktionen (HTML5, CSS3) bekommen?

  • Hast Du mal geschaut, ob Du die Zeile nicht in der Blogengine direkt eintragen kannst? Ich habe zum Beispiel bei meiner die Möglichkeit, RAW Header direkt setzen zu können. Unabhängig vom verwendeten Stylesheet.

    Alternativ kannst Du auch einen entsprechenden HTTP-Header in der Webserverkonfiguration setzen.

    VG, Daniel

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment