實現站內百度搜尋跳轉效果

admin發表於2017-03-23

在很多網站都有百度搜尋效果，當然這個搜尋可以使用百度提供的程式碼，也可以自定義實現，下面就通過程式碼例項介紹一下如何實現此功能，程式碼比較簡單實際應用中完全可以利用百度提供的程式碼，當然這裡只是希望程式碼給瀏覽者帶來啟示作用。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){
  (function(document){ 
    var submit = document.getElementById('submit'); 
    var keyword = document.getElementById('keyword'); 
    var url = 'http://www.baidu.com/baidu?wd='; 
    submit.onclick= function() { 
      var href = url + escape(keyword.value); 
      if(href !== submit.href){ 
        submit.href =href ；
      } 
    } 
  })(document); 
}
</script> 
<body>
<input type="search" id="keyword" autocomplete="off" placeholder="請輸入搜尋關鍵字" /> 
<a href="###" id="submit" target="_blank" >搜尋</a> 
</body>
</html>

以上程式碼實現了我們的要求，輸入關鍵字點選搜尋即可實現在百度的搜尋功能，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.(function(document){ })(document)，宣告一個匿名函式，並以document作為引數傳遞給此函式。

3.var submit = document.getElementById('submit')，獲取id屬性值為submit元素物件。

4.var keyword = document.getElementById('keyword')，獲取id屬性值為keyword的元素物件。

5.var url = 'http://www.baidu.com/baidu?wd='，宣告一個變數並賦值一個字串，作為提交的連結地址。

6.submit.onclick = function() { }，為提交按鈕註冊onclick事件處理函式。

7.var href = url + escape(keyword.value); ，連結字串，結果就是要提交的連結，後面帶有要搜尋的引數，並且對關鍵字進行了編碼，否則可能會出現亂碼的情況。

8.if(href !== submit.href){submit.href =href }，判斷連結按鈕的href屬性值是否和href字串相同，如果不相同就將href屬性值賦值為href 變數儲存的值。

二.相關閱讀:

1.onclick事件可以參閱javascript click 事件一章節。 

2.escape()函式可以參閱javascript escape()一章節。

相關文章