用javascript打造搜索工具栏
用javascript打造搜索工具栏
发布时间:2016-12-29 来源:查字典编辑
摘要:一:最终效果二:原理如果你在Yahoo中搜索“中国”,那么在浏览器的地址栏将得到这样一串地址:http://search.cn.yahoo....

一:最终效果

用javascript打造搜索工具栏1

二:原理

如果你在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(“中国”);来完成。

四:代码

(点击加号展开)

复制代码 代码如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Search.aspx.cs"Inherits="Search"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Search</title>

<scriptlanguage="javascript"type="text/javascript">

//<!CDATA[

functionGetEncodeOfKey()

{

varstrKey=window.document.getElementById("Text_Key").value;

returnencodeURIComponent(strKey);

}

functionGetUrl(site)

{

varencode=GetEncodeOfKey();

//web

if(document.getElementById("RadioButtonList_Kind_0").checked)

{

if(site=="google")

{

return"http://www.google.com/search?q="+encode+"&ei=UTF-8";

}

else

{

return"http://search.yahoo.com/search?p="+encode+"&ei=UTF-8";

}

}

//mp3

elseif(document.getElementById("RadioButtonList_Kind_1").checked)

{

if(site=="google")

{

return"http://www.google.com/search?q="+encode+"mp3"+"&ei=UTF-8";

}

else

{

return"http://audio.search.yahoo.com/search/audio?&p="+encode+"&ei=UTF-8";

}

}

//img

elseif(document.getElementById("RadioButtonList_Kind_2").checked)

{

if(site=="google")

{

return"http://images.google.com/images?q="+encode+"&ei=UTF-8";

}

else

{

return"http://images.search.yahoo.com/search/images?p="+encode+"&ei=UTF-8";

}

}

else

{

//alert("err");

}

}

functionButton_Google_onclick()

{

window.open(GetUrl("google"));

}

functionButton_Yahoo_onclick()

{

window.open(GetUrl("yahoo"));

}

//]]>

</script>

</head>

<body>

<formid="form1"runat="server">

<div>

<br/>

<br/>

<strong><spanstyle="font-size:24pt;color:#336633">Search<br/>

</span></strong>

</div>

<hrstyle="position:relative"/>

<br/>

<tablestyle="left:0px;position:relative;top:0px">

<tr>

<tdstyle="width:31px;height:21px">

<spanstyle="font-family:Terminal">Key</span></td>

<tdstyle="width:253px;height:21px">

<inputid="Text_Key"style="width:248px;position:relative"type="text"/></td>

<tdstyle="width:175px;height:21px">

<asp:RadioButtonListID="RadioButtonList_Kind"runat="server"RepeatDirection="Horizontal"

Style="position:relative"Font-Names="terminal">

<asp:ListItemSelected="True">Web</asp:ListItem>

<asp:ListItem>Mp3</asp:ListItem>

<asp:ListItem>Image</asp:ListItem>

</asp:RadioButtonList></td>

</tr>

<tr>

<tdstyle="width:31px">

</td>

<tdcolspan="2">

<inputid="Button_Google"style="width:80px;position:relative"type="button"value="Google"onclick="returnButton_Google_onclick()"/>

<inputid="Button_Yahoo"style="left:-29px;width:104px;position:relative"type="button"

value="Yahoo!"onclick="returnButton_Yahoo_onclick()"/></td>

</table>

<br/>

<hrstyle="position:relative"/>

<asp:HyperLinkID="HyperLink_Home"runat="server"NavigateUrl="~/Default.aspx"Style="position:relative">Home</asp:HyperLink></form>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新asp.net教程学习
热门asp.net教程学习
编程开发子分类