Html & Script

검색 공급자 추가 IE7, FF, PHP 소스, js

페이지 정보

본문

 
 
FireFox, IE7에서 기본 검색자가 추가할 수 있다는것은 다 아실테구요...

Tip&Tech에 보니 소스는 없는거 같아서 올립니다...

- FF 와 IE7일 경우만 기본검색자 추가 메세지 출력

- 하루 열지않기 (쿠키)

- FF, IE7 브라우져별 다른 이미지 출력

- 화면 우측 상단 스크롤 따라다니는 기능


조금 유별난건 도메인이 틀리더라도 검색공급자를 추가할수 있네요...

aaa.com에서 bbb.com 검색 공급자를 배포할수도 있습니다.


예제 사이트 : http://downloader.co.kr

아래 소스를 추가하시면 사이트 접속시 IE7,FF 브라우저 검색 공급자 부분에

 아이콘이 강조되어 보입니다..

<link title="공급자명" rel="search" type="application/opensearchdescription+xml" href="http://domain.com/provider.xml">
 
 
 
IE (Internet Explorer) 7 버전이 되면서 브라우저 우측 상단에 검색창이 기본으로 붙어있다. 그리고 여기에 사용자가 직접 '검색 공급자'를 추가할 수 있는 기능이 들어있다. 우연히 yes24를 들어갔는데, 자동으로 아래 그림과 같이 메뉴가 추가되어 있는 걸 발견했다. 앗, 이거 어떻게 한 거지, 궁금해서 잠시 들어다 봤다.
 
yes24-search_joycestudy.jpg
 
HTML 코드 중에 아래와 같은 부분이 있다. 브라우저의 버전을 검사해서 만약 IE7 이면 "Header_tdSearchTerm" 이라는 부분을 표시하도록 한다.
 
    <SCRIPT LANGUAGE="JavaScript">
    <!--
     //IE 7.0 사용자일경우 검색창 추가 항목을 나타낸다.
     function checkIE7()
     {
      if(isAgentIE() == 1 && getIEVersion() == 7)
      {
       document.getElementById("Header_tdSearchTerm").style.display = "block";
      }
     }
     function openAddSearchWin()
     {
      centerNewWinNoScroll("/main/popup_AddSearchWin.aspx","searchTerm", 363, 414);
     }

     checkIE7();
    //-->
    </SCRIPT>
 
HTML 부분은 다음과 같다.
<tr>
  <td><a href="javascript:addFavorite();" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'즐겨찾기\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_favorite.gif" width="46" height="16" alt="즐겨찾기" border="0"></a></td>
  <td id="Header_tdSearchTerm" style="display:none"><a href="javascript:openAddSearchWin();"><img src="http://image.yes24.com/sysimage/newwelcome/ut_addSearchWin.gif" width="53" height="16" alt="검색창 추가" border="0"></a></td>
  <td><a href="https://www.yes24.com/Templates/FTLogin.aspx" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 로그인\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_login.gif" width="31" height="16" alt="로그인" border="0"></a></td>
  <td><a href="/Member/FTMemAcc.aspx" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 회원가입\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_join.gif" width="42" height="16" alt="회원가입" border="0"></a></td>
  <td><a href="/Member/FTMyOrderList01.aspx" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 주문/배송조회\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_order.gif" width="62" height="16" alt="주문/배송조회" border="0"></a></td>
  <td><a href="/Order/FTCartList01.aspx" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 카트\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_cart.gif" width="41" height="16" alt="카트" border="0"></a></td>
  <td><a href="/Member/FTMypageMain.aspx" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 마이페이지\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_mypage.gif" width="49" height="16" alt="마이페이지" border="0"></a></td>
  <td><a href="/Member/FTGoMyBlog.aspx?type=list" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 마이리스트\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_mylist.gif" width="50" height="16" alt="마이리스트" border="0"></a></td>
  <td><a href="/Member/FTGoMyBlog.aspx?type=blog" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 내블로그\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_myblog.gif" width="42" height="16" alt="내블로그" border="0"></a></td>
  <td><a href="/Templates/FTCusMain.aspx" onMouseDown="eval('try{ _trk_clickTrace( \'EVT\', \'웰컴 GNB 고객센터\' ); }catch(_e){ }');"><img src="http://image.yes24.com/sysimage/newwelcome/ut_cs.gif" width="36" height="16" alt="고객센터" border="0"></a></td>
 </tr>
</table> 
 
 
 
위 코드는 아래와 같이 나타난다. 
 
yes24-search1_joycestudy.jpg
 
 "검색창 추가" 메뉴를 누르면 아래 창이 뜬다.
 
 
yes24-search2_joycestudy.jpg
 
 
이 화면의 자바스크립트 코드는 아래와 같다.
 
<SCRIPT LANGUAGE="JavaScript">
<!--
 function setDefaultSearch()
 {
  window.external.AddSearchProvider("http://www.yes24.com/searchCenter/YES24SearchCenter.xml");
  //self.close();
 }
//-->
</SCRIPT>
이 대목에서 YES24SearchCenter.xml 파일의 내용이 궁금해진다.
 
 <?xml version="1.0" encoding="UTF-8"?>
 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName>YES24 검색</ShortName>
   <Image height="16" width="16" type="image/x-icon">http://image.yes24.com/sysimage/welcome/yes24.ico</Image>
   <Description>대한민국 대표 인터넷서접 YES24입니다. 도서, 음반, DVD, 화장품, GIFT, 영화</Description>
   <Tags>YES24 검색</Tags>
   <Contact>webmaster@yes24.com</Contact>
   <Url type="text/html" template="http://www.yes24.com/SearchCenter/SearchResult.aspx?query={searchTerms}"/>
   <InputEncoding>EUC-KR</InputEncoding>
 </OpenSearchDescription>
다소 복잡한 형태를 띠고는 있지만 뭐 그럭저럭 해석할 만 하다.
 
다시, 처음으로 되돌아 가서, "검색창 추가" 버튼을 누르지 않고도 자동으로 검색창 메뉴에 노출되게 하는 방법이 HTML 코드에 남아있을 것 같은데, 더 찾아보자.
 
 <title>YES24 - 대한민국 대표 인터넷서점</title>
 <meta http-equiv='Content-Type' content='text/html; charset=euc-kr'>
 <link rel="shortcut icon" href="http://image.yes24.com/sysimage/top/favicon16.ico" type="image/x-icon">
 <LINK REL="STYLESHEET"  TYPE="text/css" HREF="/Resource/css/Newstyle.css">
 <link title="YES24 검색" rel="search" type="application/opensearchdescription+xml" href="http://www.yes24.com/searchCenter/YES24SearchCenter.xml">
위 코드의 마지막 라인이 아마도 그것인 듯 싶다.
 
참고로 yes24에서 사용하는 IE7 전용 함수 모음인 Yes24AJAX.js 파일을 첨부한다.

관련자료

등록된 댓글이 없습니다.
Today's proverb
당신은 당신이 생각하는 대로 살아야 합니다. 그렇지 않으면 머지 않아 당신은 사는 대로 생각할 것입니다. (폴 발레리)