Integration von Internet Explorer 9 in Windows 7
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
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:
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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="https://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:
Dazu benötigt man lediglich eine weitere Zeile im HTML-Code:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="https://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:
Der Source-Code der oben dargestellten Seite:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="https://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:
Anschließend hat man die Webseite auf einen Klick parat in der Startleiste:
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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="https://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.
Der dazu notwendige HTML-Code:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="https://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:
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=https://host/Page1.html;icon-uri=https://host/icon1.ico"/>
2: <META name="msapplication-task" content="name=Task 2;action-uri=https://microsoft.com/Page2.html;icon-uri=https://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:
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
Anonymous
January 01, 2003
Hallo Rico, vielen Dank für das Feedback. Ich habe die Fehler korrigiert. VG, DanielAnonymous
January 01, 2003
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, DanielAnonymous
December 07, 2010
The comment has been removedAnonymous
December 13, 2010
The comment has been removed