最近筆者在學習網頁開發,想著自己做一個常用的網址集合,方便自己。在網頁中需要加入各大搜索引擎的搜索框,可以直接從這裡輸入搜索內容,並顯示結果。相當於調用了搜索引擎。在網上找了資料,自己折騰了一下。下面就來說說如何調用搜索引擎。
(如下圖,是一個搜索引擎的集合。)
方法/步驟
調用搜索引擎需要用到javascript語句:通用格式為
function s_1()
{window.open(";q="+encodeURI(f_g1.key.value));return false;};
中間用黑體標出的就是搜索引擎的調用接口,可以替換成其他的。這些語句可以獲得相應的搜索框中的值,並進行搜索。
在此列出一些常用的搜索引擎接口:
谷歌搜索:http://www.google.com.hk/search?hl=zh-CN&source=hp&q=百度搜索:http://www.baidu.com/s?wd=百度貼吧:http://tieba.baidu.com/f?kw=百度圖片:http://image.baidu.com/i?ct=201326592&&word=百度音樂:http://mp3.baidu.com/m?tn=baidump3&ct=134217728&lm=-1&word=優酷搜索:http://www.soku.com/v?keyword=必應搜索:http://cn.bing.com/search?q=土豆搜索:http://so.tudou.com/isearch/有道搜索:http://www.youdao.com/search?q=
使用時在後面附加即可,如下:
function s_1()
{window.open("http://www.google.com/search?hl=zh-CN&q="+encodeURI(f_g1.key.value));return false;};
function s_2()
{window.open("http://www.baidu.com/baidu?tn=gg5g&word="+encodeURI(f_g2.key.value));return false;};
function s_3()
{window.open(";+encodeURI(f_g3.key.value));return false;};
接下來是html和css的一些代碼操作。對於搜索框,使用如下代碼:
(筆者在此使用的是bootstrap開發框架,不熟悉的同學可以百度相關內容。)
注意name值需與上文中javascript匹配,“encodeURI(f_g1.key.value));”
需要注意的已用黑體標出,替換即可。
下面給出最終的代碼:(一些重複內容可複製)
function s_1()
{window.open("http://www.google.com/search?hl=zh-CN&q="+encodeURI(f_g1.key.value));return false;};
function s_2()
{window.open("http://www.baidu.com/baidu?tn=gg5g&word="+encodeURI(f_g2.key.value));return false;};
function s_3()
{window.open("http://www.sogou.com/web?query="+encodeURI(f_g3.key.value));return false;};
function s_4()
{window.open("http://www.soku.com/v?keyword="+encodeURI(f_g4.key.value));return false;};
function s_5()
{window.open("http://cn.bing.com/search?q="+encodeURI(f_g5.key.value));return false;};
function s_6()
{window.open(";&word="+encodeURI(f_g6.key.value));return false;};
這是我最終做成的效果圖:
注意事項
如果需要了解更多關於計算機方面的教程,可以查看筆者所寫的一些經驗,或者訪問我的個人網站qianmoguangsha.com
有任何問題可以評論我或者聯繫我(聯繫方式在個人經驗主頁上)