Panel vyhledávání v MSIE jako sidebar ostatních prohlížečů

14. září 2005

•

V tomto článku si ukážeme, jak zejména v intranetových aplikacích, ale třeba i na webových stránkách, využít vyhledávací panel Microsoft Internet Exploreru k různým doplňkovým funkcím. Současně si ukážeme, jak tentýž panel využít v takzvaném sidebaru prohlížečů, které přidávání stránek do sidebarů podporují.

Do postranního panelu se hodí dát uživateli k dispozici různé doplňkové, rozšiřující nebo často používané funkce, může to být například naše vlastní rozšířené vyhledávání. Mimo Microsoft Internet Explorer podporují postranní panely i další prohlížeče, například Firefox a Opera. Programové zacházení s nimi je však odlišné od MSIE a také jejich používání uživatelem se trochu liší.

V naší ukázce vytvoříme jednu stránku vhodnou pro zobrazení v postranním panelu a tato bude funkční jak v MSIE, tak v ostatních prohlížečích. Dále je potřebné dát k dispozici uživatelům MSIE odkaz, kterým si postranní panel mohou dle potřeby otevřít, a současně uživatelům ostatních prohlížečů dát odkaz, kterým si jednorázově náš panel přidají ke svým sidebarům. Je zřejmé, že vzhledem k odlišné práci s postranním panelem v MSIE a ostatních prohlížečích, by při zobrazení v MSIE měl být odkaz co nejvíce „na ráně“, protože jím se uživatel bude dostávat k rozšířeným funkcím. V ostatních prohlížečích postačí, když bude odkaz například někde v zápatí, protože jej uživatel použije pouze jednou pro přidání nového sidebaru podobně jako odkaz pro přídání stránky k oblíbeným.

Pro ukázku (zdrojový kód) jsem připravil jednoduchou stránku, která je svým vzhledem podobná původnímu panelu vyhledávání v MSIE. Obsahuje textové pole pro vyhledávání, ovšem uživatel si může pomocí radiobuttonů zvolit, kde chce hledaný výraz vyhledat. Výsledky akcí v postranním panelu se budou zobrazovat v hlavním okně prohlížeče. Odkaz pro aktivaci postranního panelu je umístěn v druhé ukázkové stránce, ve které je vyřešeno rozdílné chování odkazu v MSIE a ostatních prohlížečích.

Nejprve si ukažme provedení odkazu, kterým si uživatel otevře nebo přidá postranní panel. Odkazy budou ve skutečnosti dva, podmíněným komentářem zajistíme rozlišení, který odkaz má být vidět v kterém prohlížeči.

<!–[if IE]>
<a href=“SearchPanel.html“ onclick=“return !window.open(this.href,’_search‘);“ title=“Rozšířené hledání“>Rozšířené</a>
<![endif]–>
.
.
<![if ! IE]>
<a href=“SearchPanel.html“ rel=“sidebar“ title=“Rozšířené hledání“>Rozšířené</a>
<![endif]>

První odkaz bude viditelný pouze v Internet Exploreru, ohleduplným způsobem směrujeme otevření odkazu do okna s názvem _search, což je rezervovaný název určený právě pro otevření panelu vyhledávání v MSIE. Druhý odkaz je určen pro ostatní prohlížeče, povšimněte si atributu rel se zvláštní hodnotou sidebar. Tuto hodnotu prohlížeč chápe jako odkaz, který má cíl uložit do oblíbených záložek. Vidíme, že odkazy ani nejsou těsně za sebou – jak jsem zmínil výše, odkaz pro ostatní prohlížeče nebude uživatel používat tak často, proto může být v úplně jiném místě stránky.

Nyní se budeme věnovat stránce vlastního panelu. Obsah stránky panelu může být opravdu libovolný, je potřeba mít pouze na zřeteli, že všechny odkazy a formuláře, jejichž cíl má být zobrazen v hlavním okně prohlížeče, musí být směrovány do speciálního okna. Způsobů, jak toto zajistit, může být několik, jako nejvhodnější si mi jeví ošetřit odkazy klientským skriptem – pokud se smíříme i s trochu méně čistým, ale velmi jednoduchým řešením, které jsem zvolil i já, postačí doplnit do hlavičky stránky element base určující výchozí cíl odkazů či formulářů.

A jako obvykle, liší se práce s MSIE a ostatními prohlížeči. Rozdíl je naštěstí jen v názvu okna, do kterého je potřeba směřovat – v MSIE se okno nazývá _main, v ostatních prohlížečích je potřeba použít název _content, odlišení opět zajistíme podmíněným komentářem:

<!–[if IE]>
<base target=“_main“ />
<![endif]–>
<![if ! IE]>
<base target=“_content“ />
<![endif]>

V naší ukázce jsem se snažil také zajistit vzhled obdobný, jako má původní vyhledávací panel Microsoft Internet Exploreru, celá stránka panelu i s obslužným skriptem pak může vypadat třeba takto:

<?xml version=“1.0″ encoding=“utf-8″ ?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“cs“ lang=“cs“ dir=“ltr“>
<head>
    <meta http-equiv=“Content-type“ content=“text/html; charset=utf-8″ />
    <meta http-equiv=“Content-language“ content=“cs“ />
    <meta http-equiv=“Content-script-type“ content=“text/javascript“ />
    <meta http-equiv=“Content-style-type“ content=“text/css“ />
    <meta http-equiv=“ImageToolBar“ content=“No“ />
    <meta http-equiv=“MSThemeCompatible“ content=“No“ />
    <meta name=“MSSmartTagsPreventParsing“ content=“True“ />
    <meta name=“AutoSize“ content=“Off“ />
    <title>Vyhledávání</title>
    <!–[if IE]>
      <base target=“_main“ />
    <![endif]–>
    <![if ! IE]>
      <base target=“_content“ />
    <![endif]>
    <style>
    body
    {
      margin:3pt;
      font-family: Tahoma,Verdana,Arial;
      font-size: 8pt;
      overflow:auto;
    }
    label
    {
      white-space:nowrap;
    }
    </style>
</head>
<body>
    <script type=“text/javascript“>
    function doSearch(radioObj,searchUrl,searchParam)
    {
      if (radioObj.checked)
      {
        var txtSearch = document.getElementById(‚txtSearch‘)
        txtSearch.name = searchParam;
        radioObj.form.action = searchUrl;
        if (txtSearch.value.length > 0)
          radioObj.form.submit();
      }
    }
    </script>
    <form method=“get“ action=“http://www.google.com/search“>
      <div>Hledaný výraz:</div>
      <div><input type=“text“ id=“txtSearch“ name=“q“ value=““ style=“width:100%;“ size=“18″ /></div>
      <div style=“text-align:right;“><input type=“submit“ value=“Hledat“ /></div>
      <fieldset>
        <legend>Kde hledat</legend>
        <input type=“radio“ id=“S1″ name=“__SetSearch“ onclick=“doSearch(this,’http://www.google.com/search‘,’q‘);“ checked=“checked“ />
        <label for=“S1″>Google.com</label>
        <br />
        <input type=“radio“ id=“S2″ name=“__SetSearch“ onclick=“doSearch(this,’http://jyxo.cz/s‘,’s‘);“ />
        <label for=“S2″>Jyxo.cz</label>
        <br />
        <input type=“radio“ id=“S3″ name=“__SetSearch“ onclick=“doSearch(this,’http://mapy.atlas.cz/mapviewer/search.aspx‘,’squery‘);“ />
        <label for=“S3″>Mapy (Atlas.cz)</label>
        <br />
        <input type=“radio“ id=“S4″ name=“__SetSearch“ onclick=“doSearch(this,’http://slovnik.seznam.cz/sl.fcgi?src_trg=en_cz‘,’word‘);“ />
        <label for=“S4″>Slovník (Seznam.cz)</label>
      </fieldset>
    </form>
</body>
</html>

Závěrem bych ještě doplnil informaci, že výchozí stránku panelu hledání v MSIE je možné ovlivnit i nastavením v registru Windows, což se může hodit pro použití v intranetu – nastavení pak může vypadat například takto:

[HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMain]
„Search Page“=“C:NewIESearchIESearch.html“
„Search Bar“=“C:NewIESearchIESearch.html“