当前位置: 首页 > news >正文

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

创建双搜索引擎页面

百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度的创建了!撒花!!

http://www.gsyq.cn/news/53494.html

相关文章:

  • P7152 [USACO20DEC] Bovine Genetics G
  • CF1592E Bored Bakry
  • 如何在ISA-95体系中采用Apache Camel + MQTT Broker衔接L3与L4 Legacy应用
  • 11月18日日记
  • 一文讲清:数据清洗、数据中台、数据仓库、数据治理 - 智慧园区
  • 人工智能之编程进阶 Python高级:第四章 数学类模块
  • Solon AI 开发学习 - 1导引
  • 2025 年 11 月滚珠丝杆厂家推荐排行榜,高负载滚珠丝杆,耐磨滚珠丝杆,检测仪器高速滚珠丝杆,螺母滚珠丝杆,医用自动化滚珠丝杆公司推荐
  • UE4/UE5反射系统动态注册机制解析 - 实践
  • 做题随笔:P3403
  • 《从纪律委员到AI元人文开放者》
  • 「Solution」AGC008F Black Radius
  • 人工智能之编程进阶 Python高级:第二章 面向对象
  • OI vs Group Theory, Do You Guys Know?
  • 2025年11月穿戴式吸奶器,电动吸奶器,百元吸奶器品牌测评排名,高性价比选购指南!
  • 2025年11月百元吸奶器,静音吸奶器,便携吸奶器品牌测评排名,高性价比选购指南!
  • Q:R2R(Row-to-Row)映射 XML 是数据同步“源表字段→目标表字段” 的转换规则基础教程。
  • 【Azure Developer】解决在中国区 Microsoft Graph 命令Get-MgUserAuthenticationPhoneMethod 不可用的问题
  • 聊聊deepseek对latex的辅助
  • 【LVGL】图片部件
  • 10大 spring源码设计模式 (图解+秒懂+史上最全)
  • TypeScript-安装安装
  • ThreadLocal 、TransmittableThreadLocal 底层原理 (图解+秒懂+史上最全)
  • linux c ini
  • Spring AI Alibaba 项目源码学习(十二)-完结:Tool
  • linux busybox
  • C# 常用控件(学习笔记8)
  • 模拟赛记录 11/18
  • 代码随想录Day14_
  • 2025年11月成都建设工程律师,成都执业律师,成都经济纠纷律师事务所推荐:聚焦办案实力与胜诉口碑!