The realization method of IE9 browser fixed website function

These two Demo all need to use IE9 browsing, and drag the label to the taskbar fixed to observe the effect.

I. Adoption of the Meta-definition

HTML language:

In the

<meta name= "Application-name" content= "IE9 Test"/>

<meta name= "Msapplication-tooltip" content= "Ray ' s IE9 Test"/>

<meta name= "Msapplication-window" content= "width=1024;height=768"/>

<meta name= "Msapplication-task" content= "name= home page; Action-uri=/;icon-uri=/favicon.ico"/>

<meta name= "Msapplication-task" content= "name= message; Action-uri=/guestbook;icon-uri=/favicon.ico"/>

<meta name= "Msapplication-task" content= "name= about; Action-uri=about;icon-uri=/favicon.ico"/>

<meta name= "Msapplication-navbutton-color" content= "#0000ff"/>

<meta name= "Msapplication-starturl" content= "/"/>

These include two properties:

What name includes: Msapplication-task, Msapplication-tooltip, etc.

Content includes: Name display text, Action-uri Click to go to the address. Icon-uri appears in front of the icon address. Wait a minute

This is still quite simple, a look at the understanding, I will not say more.

The code above also defines the color of the "prev" and "Next" buttons on the IE9 browser interface, so that we can automatically adjust the button colors according to the main color of the site.

<meta name= "Msapplication-navbutton-color" content= "Color"/>

Color representations can be made by using a color name, for example, to display yellow:

<meta name= "Msapplication-navbutton-color" content= "Yellow"/>

You can also use a 16-bit color code:

<meta name= "Msapplication-navbutton-color" content= "#0000ff"/>

The effect is as follows:

Second, through JavaScript definition

The main use of the IE9 provided a few APIs, so sure to do error handling, or else to replace the other browser dead up (Hello, this is IE only yes).

1. Window.external.msIsSiteMode ()
   Returns whether the current Internet Explorer window is open as a fixed web site.
   Use this method to distinguish between normal browsing mode and "fixed Web" mode.
2. Window.external.msAddSiteMode ()
   Adds the current Web site to the Start menu and opens the site as a fixed site, but is not pinned to the taskbar.
3. Window.external.msSiteModeSetIconOverlay (Bstriconurl [, bstrdescription])
   Add "Overwrite Icon".
   Bstriconurl: Icon URL;
   Bstrdescription: Provides a description of the icon.
4. Window.external.msSiteModeClearIconOverlay ()
   Clears the overwrite icon.
5. Window.external.msSiteModeCreateJumpList (Bstrheader)
   Creates a new Jump List and assigns a name to it.
   Only one Jump List can be created.
6. Window.external.msSiteModeClearJumpList ()
   Clear the Jump List.
7. Window.external.msSiteModeAddJumpListItem (Bstrname, Bstractionuri, Bstriconuri)
   Add a Jump list project with up to 20 Jump list items.
   Bstrname: The name of the display;
   Bstractionuri: Absolute or relative URL to turn when clicked;
   Bstriconuri: Displays an absolute or relative URL to the icon.
8. Window.external.msSiteModeShowJumpList ()
   Update Jump List.
   After making changes to the Jump List, use this method to update the display.

Here's how to implement Thumbnail Toolbar.

1. Set up listening for the Msthumbnailclick event.
   Document.addeventlistener (' Msthumbnailclick ', onbuttonclicked, false);
2. Add a button. This function will return the button ID.
   var btnplay = Window.external.msSiteModeAddThumbBarButton (Iconuri, TOOLTIP);
3. Displays Thumbnail Toolbar.
   Window.external.msSiteModeShowThumbBar ();
4. Respond to the Thumbnail Toolbar click event.
   function OnButtonClicked (e) {
   Switch (E.buttonid) {
   Case Btnplay:
   Play ();
   Break
   }
   }