網頁設計｜一次輸入，多個網站同時搜索

在網頁設計中， 通過表單和JS設計， 可以實現一次輸入， 很便捷地在多個網站同時搜索， 外觀效果如下圖所示：

在前面的框內輸入關鍵字， 按一下選項按鈕選擇需要檢索資料的網站， 即可開始搜索。

百度

360

穀歌

必應

搜狗

雅虎

有道

搜搜

GoogleEn

Yahoo

bing

gzLibrary

百度百科

function search(){

if(formmain.rdgoogle.checked)

window.open("http://www.google.com.hk/search?hl=zh-CN&q=" + encodeURI(formmain.searchkey.value));

if(formmain.rdbaidu.checked)

window.open("http://www.baidu.com/baidu?tn=zhongguosou&ct=&lm=&z=&rn=&word="+formmain.searchkey.value+"&_si.x=4&_si.y=2");

if(formmain.rdyahoozhongguo.checked)

window.open("http://search.cn.yahoo.com/s?pid=402877_1010&v=web&p=" + formmain.searchkey.value);

if(formmain.rdsogou.checked)

window.open("http://www.sogou.com/web?query="+formmain.searchkey.value+"&sogouhome=");

if(formmain.rdsoso.checked)

window.open("http://www.soso.com/q?pid=s.idx&w=" + formmain.searchkey.value);

if(formmain.rdyoudao.checked)

window.open("http://www.youdao.com/search?keyfrom=web.index.suggest&q="+formmain.searchkey.value+"&btnIndex="+ formmain.searchkey.value);

if(formmain.rdbingzonghe.checked)

window.open("http://cn.bing.com/search?FORM=BWFD&q=" + encodeURI(formmain.searchkey.value));

if(formmain.rdgoogleen.checked)

window.open("http://www.google.com.hk/search?hl=en&newwindow=1&safe=strict&tbo=d&site=webhp&source=hp&q="+encodeURI(formmain.searchkey.value));

if (formmain.rd_yahoo.checked)

window.open("http://search.yahoo.com/search?prssweb=Search&ei=UTF-8&fr=FP-tab-web-t&fl=0&x=wrt&p=" + encodeURI(formmain.searchkey.value));

if(formmain.rd_bing.checked)

window.open("http://www.bing.com/search?q="+encodeURI(formmain.searchkey.value));

if(formmain.rd360sou.checked)

window.open("http://www.so.com/s?ie=utf-8&src=http://www.toutiao.com/item/6405460022431580674/360sou_home&q=" + encodeURI(formmain.searchkey.value) + "&_re=0");

if(formmain.bdbaike.checked)

window.open("http://www.baidu.com/baidu?word=" + encodeURI(formmain.searchkey.value) + "&tn=bds&cl=3&ct=2097152&si=baike.baidu.com&s=on");

}

上面的JS代碼看起來很多， 其實每個選項按鈕對應的代碼命令格式都是相同的， 基本框架如下所示：

if(...)

window.open(...);

也就是通過判斷選擇了哪一個選項按鈕， 然後應用window物件的open方法以對話方塊內的內容為關鍵字打開相應的網站進行搜索。

open的參數對應的是網站搜索對應的字串（位址+關鍵字），

當客戶與伺服器通訊時， 一些非字母數位字元（如空格）不能以它們本來的形式傳輸。 允許直接傳輸的只有一個範圍很窄的字母、數位、標點符號集。 為了包含其它的字元， 它們必須通過特殊的記號（%）與它們的十六進位ASCII值來編碼。 如， 空格的16進制是hex 20(ASCII碼10進制是32）， 編碼後為%20.在流覽器的歷史記錄或URL中就會經常出現這個符號。

JavaScript中有三個可以對字串編碼的函數， 分別是： escape, encodeURI, encodeURIComponent， 相應3個解碼函數：unescape, decodeURI, decodeURIComponent 。