用JavaScript打造搜索工具栏


 一:最终效果

  

  二:原理

  如果你在Yahoo中搜索“中国”,那么在浏览器的地址栏将得到这样一串地址:http://search.cn.yahoo.com/search?ei=gbk&fr=fp-tab-web-ycn&meta=vl%

  3Dlang_zh-CN%26vl%3Dlang_zh-TW&pid=ysearch&source=ysearch_www_hp_button

  &p=%D6%D0%B9%FA&Submit=

  看上去有些乱了,简化一下:http://search.cn.yahoo.com/search?&p=%D6%D0%B9%FA

  这就是关键.其中&p=%D6%D0%B9%FA是搜索的关键字参数,而%D6%D0%B9%FA是“中国”的

  Url编码。OK,我们只要能构造出这样的编码就好了。

  三:URL编码

  JavaScript的encodeURIComponent()函数可以完成编码工作。

  比如上面的例子我们可以用“http://search.cn.yahoo.com/search?&p=”+encodeURIComponent(“中国”);来完成。

  四:代码

  (点击加号展开)


 1<%@PageLanguage="c#"AutoEventWireup="true"CodeFile="Search.aspx.cs"Inherits="Search"%>
 2
 3<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4
 5<htmlxmlns="http://www.w3.org/1999/xhtml">
 6<headrunat="server">
 7  <title>Search</title>
 8<scriptlanguage="javascript"type="text/javascript">
 9//<!CDATA[
10
11functionGetEncodeOfKey()
12{
13  varstrKey=window.document.getElementById("Text_Key").value;   
14  return encodeURIComponent(strKey);
15}
16
17functionGetUrl(site)
18{
19  varencode=GetEncodeOfKey();
20  
21  //web
22  if(document.getElementById("RadioButtonList_Kind_0").checked)
23  {
24    if(site=="google")
25    {
26      return"http://www.google.com/search?q="+encode+"&ei=UTF-8";
27    }
28    else
29    {
30      return"http://search.yahoo.com/search?p="+encode+"&ei=UTF-8";
31    }
32  }
33  //mp3
34  elseif(document.getElementById("RadioButtonList_Kind_1").checked)
35  {
36    if(site=="google")
37    {
38      return"http://www.google.com/search?q="+encode+"mp3"+"&ei=UTF-8";
39    }
40    else
41    {
42      return"http://audio.search.yahoo.com/search/audio?&p="+encode+"&ei=UTF-8";
43      
44    }
45  }
46  //img
47  elseif(document.getElementById("RadioButtonList_Kind_2").checked)
48  {
49    if(site=="google")
50    {
51      return"http://images.google.com/images?q="+encode+"&ei=UTF-8";
52    }
53    else
54    {
55      return"http://images.search.yahoo.com/search/images?p="+encode+"&ei=UTF-8";
56    }
57  }
58  else
59  {
60    //alert("err");
61  }
62  
63  
64}
65
66functionButton_Google_onclick()
67{
68  window.open(GetUrl("google"));
69}
70
71functionButton_Yahoo_onclick()
72{
73  window.open(GetUrl("yahoo"));
74}
75
76//]]>
77</script>
78</head>
79<body>
80  <formid="form1"runat="server">
81  <div>
82    <br/>
83    <br/>
84    <strong><spanstyle="font-size:24pt;color:#336633">Search<br/>
85    </span></strong>
86  </div>
87  <hrstyle="position:relative"/>
88    <br/>
89    <tablestyle="left:0px;position:relative;top:0px">
90      <tr>
91        <tdstyle="width:31px;height:21px">
92          <spanstyle="font-family:Terminal">Key</span></td>
93        <tdstyle="width:253px;height:21px">
94          <inputid="Text_Key"style="width:248px;position:relative"type="text"/></td>
95        <tdstyle="width:175px;height:21px">
96          <asp:RadioButtonListID="RadioButtonList_Kind"runat="server"RepeatDirection="Horizontal"
97            Style="position:relative"Font-Names="terminal">
98            <asp:ListItemSelected="True">Web</asp:ListItem>
99            <asp:ListItem>Mp3</asp:ListItem>
100            <asp:ListItem>Image</asp:ListItem>
101          </asp:RadioButtonList></td>
102      </tr>
103      <tr>
104        <tdstyle="width:31px">
105        </td>
106        <tdcolspan="2">
107          <inputid="Button_Google"style="width:80px;position:relative"type="button"value="Google"onclick="returnButton_Google_onclick()"/>
108          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
109          <inputid="Button_Yahoo"style="left:-29px;width:104px;position:relative"type="button"
110            value="Yahoo!"onclick="returnButton_Yahoo_onclick()"/></td>
111      </tr>
112    </table>
113    <br/>
114    <hrstyle="position:relative"/>
115    <asp:HyperLinkID="HyperLink_Home"runat="server"NavigateUrl="~/Default.aspx"Style="position:relative">Home</asp:HyperLink></form>
116</body>
117</html>
118


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3