The realization method of IE9 browser fixed website function

Source: Internet
Author: User
Tags error handling relative

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
      }
      }

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.