手把手教你用JavaScript打造一個網頁搜索引擎
作者：前端進階者
本篇文章主要講的就是如何使用JavaScript動態生成一個JavaScript腳本進而可以利用它來訪問百度的搜索服務，可能說的有點繞口，不過這個的確就是前端跨域的一種很有效的解決方式。
大家好，我進階學習者。
一、前言
小編之前帶著大家一起做過一個python版的搜索引擎，今天帶大家做一個JavaScript版的搜索引擎。
二、準備工具
360瀏覽器，sublime text 3編輯器，僅此而已。
三、實現結果
我們來看下實現結果，如圖：
我們只需要輸入關鍵字即可出現相應10條匹配結果，如果我們點擊其中一條結果，則會跳轉到對應的百度搜索界面。
四、項目實現過程
1.找到百度的搜索和查詢的元素節點
因為我們是使用百度為媒介來進行關鍵字的搜索，因此我們必須了解百度的搜索和查詢的元素是怎么分布的，打開百度，按下F12，如圖：
這里的箭頭處就是標注的它們的關系。
2.發送搜索查詢請求，找規律
我們來進行一次關鍵字查詢，如圖：
這樣我們就知道了這個網頁地址是我們請求后的最終地址，所以我們要將這個地址保存好。
3.同源策略和jsonp跨域
之所以講這兩個知識點，是因為我們的搜索引擎就是根據這兩個知識點演變而來，同源策略是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。同源指的是協議、域名、端口全都相同;而jsonp則是一種跨域方式，它可以減輕服務器的負載，但是它只支持get請求。
4.查詢結果
我們輸入查詢關鍵詞后，還要獲取到它有哪些待定的選項，這里就要搞清楚查詢選項有哪些，如圖：
5.實現代碼
我們可以先創建一個能夠動態生成JavaScript代碼的函數，如下：
function getlist(wd){
var script=document.createElement('script');
script.id='jsonp';
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;
document.body.appendChild(script);
}
然后我們再獲取到它的數據，如下：
function getData(data){
var script=document.querySelector('#jsonp');
script.parentNode.removeChild(script);
$('ol').html('');
var da=data.g
if(da){
da.forEach(function(item,index){
$('<li><a target="_blank" +item.q+'">'+item.q+'</a></li>').appendTo('ol');
})
}
}
最后我們就來將輸出的結果顯示出來，如下：
$('input:text').keyup(function(){
var wd=$(this).val();
if(wd==''){
$('ol').css('display','none');
$('ol').css('zIndex',-10);
}else{
$('ol').css('display','block');
$('ol').css('zIndex',20);
}
getlist(wd);
});
然后我們再配合自己寫的html和css代碼，可以將效果寫的更棒。
五、總結
本篇文章主要講的就是如何使用JavaScript動態生成一個JavaScript腳本進而可以利用它來訪問百度的搜索服務，可能說的有點繞口，不過這個的確就是前端跨域的一種很有效的解決方式。
責任編輯：武曉燕
來源：
前端進階學習交流
