尊悦刘沛昌 發表於 2025-11-18 21:08:00

如何创建你的百Google度!!(实现双搜索引擎页面)

<h2>创建双搜索引擎页面</h2>
百Google度的网站被封了,但!!!这不影响我们创建属于自己的双搜索引擎页面!
<p><strong>提前准备</strong><br>
找到你想添加的俩个搜索引擎对应的<strong>URI</strong> 和 它预先定义用于存储搜索关键词的<strong>参数名</strong>。</p>
<blockquote>
<p>打开你想要的搜索引擎的网页,在当前搜索引擎里输入“关键词”,点击搜索,然后观察上面的网址,一般“?”前出现的是对应的【URI】,“&amp;”的后面到你输入的“关键词”前,是当前搜索引擎预定义的【参数名】</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>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;双搜索引擎&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Bing &amp; 360 双搜索&lt;/h1&gt;
   
    &lt;!-- 用户输入区域 --&gt;
    &lt;input id="searchInput" /&gt;
    &lt;input type="button" onclick="performSearch()" value="双搜"/&gt;
   
    &lt;!-- 搜索引擎表单 --&gt;
    &lt;form name="bingForm" action="https://cn.bing.com/search" target="leftFrame"&gt;
      &lt;input type="hidden" name="q"/&gt;         
    &lt;/form&gt;
    &lt;form name="soForm" action="https://www.so.com/s" target="rightFrame"&gt;
      &lt;input type="hidden" name="q"/&gt;
    &lt;/form&gt;
   
    &lt;!-- 结果展示区域 --&gt;
    &lt;iframe name="leftFrame" style="height: 1000px;width: 50%;"&gt;&lt;/iframe&gt;
    &lt;iframe name="rightFrame" style="height: 1000px;width: 50%;"&gt;&lt;/iframe&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</details>
<br>
<h3>Part.Two JavaScript交互逻辑</h3>
<details>
<summary>点击查看代码</summary>
<pre><code>&lt;script type="text/javascript"&gt;
function performSearch(){
    // 获取用户输入的搜索词
    var searchText = document.getElementById("searchInput").value;
   
    // 将搜索词赋给两个表单的隐藏字段
    document.bingForm.q.value = searchText;
    document.soForm.q.value = searchText;
   
    // 同时提交两个表单
    document.bingForm.submit();
    document.soForm.submit();
}
&lt;/script&gt;
</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]
查看完整版本: 如何创建你的百Google度!!(实现双搜索引擎页面)