如何创建你的百Google度!!(实现双搜索引擎页面)
<h2>创建双搜索引擎页面</h2>百Google度的网站被封了,但!!!这不影响我们创建属于自己的双搜索引擎页面!
<p><strong>提前准备</strong><br>
找到你想添加的俩个搜索引擎对应的<strong>URI</strong> 和 它预先定义用于存储搜索关键词的<strong>参数名</strong>。</p>
<blockquote>
<p>打开你想要的搜索引擎的网页,在当前搜索引擎里输入“关键词”,点击搜索,然后观察上面的网址,一般“?”前出现的是对应的【URI】,“&”的后面到你输入的“关键词”前,是当前搜索引擎预定义的【参数名】</p>
</blockquote>
<p>一些示例(e.g.):</p>
<ul>
<li>【360】https://www.so.com/s q</li>
<li>【搜狐】https://search.sohu.com/s keyword</li>
<li>【百度】https://www.baidu.com/s wd</li>
<li>【Microsoft Bing】https://cn.bing.com/search q<br>
等等等等等~~~</li>
</ul>
<p>下面代码统一以【Microsoft Bing】和【360】为例:</p>
<h3>Part.One HTML结构实现</h3>
<details>
<summary>点击查看代码</summary>
<pre><code><!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>
</code></pre>
</details>
<br>
<h3>Part.Two JavaScript交互逻辑</h3>
<details>
<summary>点击查看代码</summary>
<pre><code><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>
</code></pre>
</details>
<br>
<h3>回顾:设计思路</h3>
分析页面的核心需求:<br>
1. 一个输入框接收用户搜索词<br>
2. 一个触发搜索的按钮<br>
3. 两个隐藏表单分别对应不同搜索引擎<br>
4. 两个iframe展示搜索结果<br>
<p><strong>OK那么我们就完成了百Google度的创建了!撒花!!</strong></p><br><br>
来源:https://www.cnblogs.com/angelicaYQ/p/19234460
頁:
[1]