Jak na tlačítka vlastních akcelerátorů a vyhledávačů v IE8 a IE7?

Poslední verze Internet Exploreru 8 a 7 v řadě nových funkcí přinášejí mimo jiné podporu vlastních vyhledávačů, IE 8 navíc tzv. akcelerátory. V tomto článku si ukážeme, jak dát k dispozici naše vlastní vyhledávače a akcelerátory a jak přidat jejich tlačítka přímo do našich webových stránek.

Internet Explorer nabízí vývojářům navíc nestandardní možnosti pro zlepšení komfortu uživatelů. Tlačítko vlastního vyhledávače a akcelerátoru dáme proto k dispozici uživatelům verze prohlížeče, který je podporuje, v ostatních prohlížečích tlačítka vůbec nebudou zobrazena. Půjde o podobný ohleduplný způsob, jakým jsme už dříve umožnili přidat stránku k oblíbeným odkazům. Prohlédněte si ukázku.

Poskytovatel vyhledávání

Jde vlastně o využití otevřeného standardu pro komunikaci vyhledávačů OpenSearch.org. Pro nás je zajímavá část o XML dokumentu popisujícího vyhledávač – ten pak obsahuje název webu, popis webu a URL pro vyhledávání. V prohlížečích pak tento standard poslouží pro přidání vyhledávačů do vyhledávacího políčka prohlížeče a dnes jej podporuje většina moderních prohlížečů, tedy Internet Explorer 7 a vyšší, FireFox, Opera a další.

Pro ukázku jsem vytvořil Interval.Cz.OpenSearchDiscover.xml, který si snadno upravíte pro svou potřebu:

<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName>Interval.cz</ShortName>
  <Description>Interval.cz</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Url type="text/html" template="http://www.google.cz/custom?domains=interval.cz&amp;sitesearch=interval.cz&amp;hl=cs&amp;q={searchTerms}" />
</OpenSearchDescription>

Vyhledávač je dobré ve stránce zveřejnit také odkazem v hlavičce. Internet Explorer navíc indikuje přítomnost vyhledávače na stránce quot;zoranžověním" šipky u vyhledávacího políčka.

Vyhledávač v hlavičce stránky zveřejníte tímto odkazem:

<link rel="Search" type="application/opensearchdescription+xml" href="Interval.Cz.OpenSearchDiscover.xml" title="Interval.cz" />

Tuto funkcionalitu už nějakou dobu podporuje například web vydavatelství zonerpress.cz. Lze ji použít pro rychlejší vyhledávání v dostupných knihách. Na tomto webu klikněte v levem sloupci na zvýrazněný odkaz „Přidat vyhledávání do lišty prohlížeče“ a nainstalujte vyhledávací modul.

Akcelerátor

Oproti poskytovatelům vyhledávání jsou akcelerátory specialitou zatím pouze Internet Exploreru 8. Ve zkratce akcelerátor usnadňuje (a tedy urychluje) práci tam, kde v nějaké stránce označujeme část textu, abychom ho vzápětí zkopírovali do schránky a přenesli jej tak do vyhledávacího políčka na jiné stránce – typicky překladového slovníku, mapy, vyhledávače jízdního řádu… Akcelerátor toto udělá za nás přímo na dané stránce. Pro detaily je k dispozici OpenService Accelerators Developer Guide.

Pro ukázku jsem vytvořil Interval.Cz.WebAccelerator.xml, který dokonce využívá vyhledávač Google:

<?xml version="1.0" encoding="UTF-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://www.google.cz/</homepageUrl>
  <display>
    <name>Interval.cz</name>
    <icon>http://interval.cz/favicon.ico</icon>
  </display>
  <activity category="Define">
    <activityAction context="selection">
      <execute action="http://www.google.cz/custom">
        <parameter name="q" value="{selection}" type="text" />
        <parameter name="domains" value="interval.cz" type="text" />
        <parameter name="sitesearch" value="interval.cz" type="text" />
        <parameter name="hl" value="cs" type="text" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

Způsob přidání akcelerátoru do prohlížeče si popíšeme dále.

Metody přidání vyhledávače a akcelerátoru

Pro přidávání vyhledávačů a akcelerátorů jsou v prohlížeči k dispozici metody window.external.AddSearchProvider() a window.external.AddService(). První z nich je dostupná ve verzích Internet Exploreru 7 i 8, druhá je určena pouze pro Internet Explorer 8.

Odlišení prohlížečů a mód dokumentu v Internet Exploreru 8

Nabízí se zde využít podmíněné komentáře, abychom tak zamezili zobrazení tlačítek v prohlížeči, který jejich funkci nepodporuje. Ihned ovšem narazíme na novémódy kompatibility Internet Exploreru 8 – umí simulovat nižší verze. To se samozřejmě projeví i na vyhodnocování podmíněných komentářů – dotaz na verzi prohlížeče je závislý na módu zobrazení. A protože Internet Explorer je opravdu čerstvý, dá se předpokládat časté použití režimu emulace IE7 a tedy nemožnost rozlišit podmíněnými komentáři verzi 7 a 8. Jen dodám, že mód zpracování dokumentu je možné ve stránce definovat parametrem X-UA-Compatible v hlavičce:

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

Možné hodnoty jsou IE=5, IE=7, IE=EmulateIE7, IE=8, IE=edge, přičemž IE=edge říká, že se má použít nejvyšší dostupný mód.

Prohledáním dokumentace naštěstí nalezneme, že Internet Explorer 8 zavádí novou vlastnost document.documentMode a s tou už si vystačíme. U předchozích verzí se dá zužitkovat i dnes již zastaralá vlastnost document.compatMode, kdybychom potřebovali důkladnější rozlišení:

var IEMode = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
  if (document.documentMode)  // IE8
    IEMode = document.documentMode;
  else // IE 5-7
  {
    IEMode = 5;
    if (document.compatMode)
    {
      if (document.compatMode == "CSS1Compat")
        IEMode = 7;
    }
  }
}

Pro naše dvě tlačítka nakonec takhle robustní skript nebude potřeba – abychom nevytvořilibariéru na svém webu postačí rozlišit verzi IE vyšší než 7 pomocí podmíněného komentáře a verzi 8 pomocí documentMode a ona dvě tlačítka nechat ve stránce vygenerovat také skriptem pomocí klasického document.write().

<!–[if gte IE 7]>
<script type="text/javascript">/* <![CDATA[ */ document.write(‚?74p>?74input type="button" onclick="window.external.AddSearchProvider(‚Interval.Cz.OpenSearchDiscover.xml‘)" value="Přidat vyhledávač" title="Přidá vyhledávač do vyhledávacího panelu" / ?76?74/p?76′); /* ]]> */</script>
<script type="text/javascript">/* <![CDATA[ */ if(document.documentMode)document.write(‚?74p>?74input type="button" onclick="window.external.addService(‚Interval.Cz.WebAccelerator.xml‘)" value="Přidat akcelerátor" title="Přidá akcelerátor do prohlížeče" / ?76?74/p?76′); /* ]]> */</script>
<![endif]–>

Tak se tlačítka (nebo jen tlačítko) objeví pouze v prohlížeči, který dané funkce podporuje a je v něm povolený JavaScript, aby prohlížeč opravdu provedl metody volané kliknutím na jednotlivá tlačítka. Na závěr se hodí dodat, že stránku s akcelerátorem se patří "vyšperkovat" ikonkou akcelerátoru podle Accelerator Icon and Guidelines.

Stažení ukázkové stránky s vyhledávačem a akcelerátorem.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.