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 파일을 첨부한다.

관련자료

댓글 0
등록된 댓글이 없습니다.
목록
Today's proverb
고개에 오르려고 하다가 꼭대기에 이르지 못했다 하더라도 얼마나 칭찬할 만한 일인가. 자기의 현재의 힘으로 자신을 되돌아보고, 애써 고매한 일을 하면서도 더 커다란 일을 그려본다는 것은 대단히 귀중한 일이다. (세네카)