創建雙搜索引擎頁面
百Google度的網站被封了，但！！！這不影響我們創建屬於自己的雙搜索引擎頁面！提前準備
找到你想添加的倆個搜索引擎對應的URI 和 它預先定義用於存儲搜索關鍵詞的參數名。
打開你想要的搜索引擎的網頁，在當前搜索引擎裏輸入“關鍵詞”，點擊搜索，然後觀察上面的網址，一般“？”前出現的是對應的【URI】，“&”的後面到你輸入的“關鍵詞”前，是當前搜索引擎預定義的【參數名】
一些示例（e.g.）：
- 【360】https://www.so.com/s q
- 【搜狐】https://search.sohu.com/s keyword
- 【百度】https://www.baidu.com/s wd
- 【Microsoft Bing】https://cn.bing.com/search q
等等等等等~~~
下面代碼統一以【Microsoft Bing】和【360】為例：
Part.One HTML結構實現
點擊查看代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙搜索引擎</title>
</head>
<body>
<h1>Bing & 360 雙搜索</h1>
<!-- 用户輸入區域 -->
<input id="searchInput" />
<input type="button" onclick="performSearch()" value="雙搜"/>
<!-- 搜索引擎表單 -->
<form name="bingForm" action="https://cn.bing.com/search" target="leftFrame">
<input type="hidden" name="q"/>
</form>
<form name="soForm" action="https://www.so.com/s" target="rightFrame">
<input type="hidden" name="q"/>
</form>
<!-- 結果展示區域 -->
<iframe name="leftFrame" style="height: 1000px;width: 50%;"></iframe>
<iframe name="rightFrame" style="height: 1000px;width: 50%;"></iframe>
</body>
</html>
Part.Two JavaScript交互邏輯
點擊查看代碼
<script type="text/javascript">
function performSearch(){
// 獲取用户輸入的搜索詞
var searchText = document.getElementById("searchInput").value;
// 將搜索詞賦給兩個表單的隱藏字段
document.bingForm.q.value = searchText;
document.soForm.q.value = searchText;
// 同時提交兩個表單
document.bingForm.submit();
document.soForm.submit();
}
</script>
回顧：設計思路
分析頁面的核心需求：1. 一個輸入框接收用户搜索詞
2. 一個觸發搜索的按鈕
3. 兩個隱藏表單分別對應不同搜索引擎
4. 兩個iframe展示搜索結果
OK那麼我們就完成了百Google度的創建了！撒花！！