「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。
为什么要做这个小案例呢？
首先我有极度严重的强迫症，对于设备交互界面的追求是越整洁越好，另外由于我的专业原因，需要经常不断地跨平台搜索各种资料，所以我作做了一个结合百度、bing、Yandex、掘金、CSDN等于一体的搜索栏。
看看百度的搜索页
百度算是好的，有的搜索引擎一打开全是广告和弹窗，比如QQ浏览器。。。。
为了还自己一个干净的界面，同时提高搜索效率，于是我自己做了一个（下图）
我知道有很多大佬做过类似的浏览器插件，但是我做的这个是一个纯网页的，不需要大家安装，也没太多花里胡哨的内容（更轻便）
实现原理
主要技术路线：网页页面跳转window.location.href
思路：
1、怎么将输入的内容提交到指定的平台
百度为例：当我们搜索“你好”时
地址栏地址：www.baidu.com/s?wd=你好
https是通信协议
那么后的s?wd=你好 是什么意思呢？我们不妨将浏览器的地址改为www.baidu.com/s?wd=世界
原来wd= 后面的字符对应的是我们需要搜索的内容，那我不就可以利用js将搜索栏的内容获取到后，做一个拼接，然后使用js跳转到拼接好的链接页面，就可以现实自制带有搜索功能的搜索栏了吗？
2、找规律
有了上述的理论基础，尝试各个平台搜索方式后发现其实现方式与百度类似，但是其具体的实现方式是有区别的具体如下
| 平台 | 域名 | 搜索字段 |
|---|---|---|
| 百度 | www.baidu.com/s | ?wd= |
| 必应 | cn.bing.com/search | ?q= |
| 简书 | www.jianshu.com/search | ?q= |
| CSDN | so.csdn.net/so/search | ?q= |
| 爱给网 | www.aigei.com/s | ?q= |
其他平台（如图）
3、写代码
我认为这个案例的html和js代码都很重要，所以重点分享这两个文件
<!DOCTYPE html>
<html lang="cn">
<!-- 以下js实现的是判断用户是不是使用的移动端，如果是移动端就跳转到移动端的HTML页面 -->
<script>
if (window.navigator.userAgent.match(/Android|iPhone|iPad/)) {
window.location.href = 'm.index.html';
} else {
console.log('pc端');
}
</script>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QHX-聚合搜索</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="imgbox">
<img src="./images/2022.png" alt="">
</div>
<div id="data">
<select name="" id="">
<!-- 我将各个平台的域名和搜索关键字都放在了下拉框的value中，
方便后面js获取，另外一定给某一平台添加默认选中状态 -->
<option value="https://www.baidu.com/s" selected>百度</option>
<option value="https://cn.bing.com/search">BING</option>
<option value="https://yandex.com/search/">Yandex</option>
<option value="https://juejin.cn/search">掘金</option>
<option value="https://zzk.cnblogs.com/s">博客园</option>
<option value="https://www.jianshu.com/search">简书</option>
<option value="https://so.csdn.net/so/search">CSDN</option>
<option value="https://www.51yuansu.com/index.php">觅元素</option>
<option value="https://www.aigei.com/s">爱给网素材</option>
<option value="https://search.bilibili.com/all">B站</option>
<option value="https://www.haiantv.cc/word">影视一键搜</option>
</select>
<input type="text" name="" id="text">
<button class="label" type="button">搜索</button>
</div>
<!-- 引入功能实现js -->
<script src="./js/index.js"></script>
</body>
</html>
//获取搜索按钮
const btn = document.querySelector('.label');
//获取下拉框，方便后期判断用户选择的搜索平台
const point = document.querySelector('select');
//获取input框
const texts = document.querySelector('#text');
//将所有平台的搜索关键字端，存入数组
const arr = ['wd', 'q', 'text', 'query', 'w', 'keyword', 'm=Index&a=fenlei&k'];
//搜索按钮被点击以后要做的事情
btn.onclick = function() {
//获取下拉框用户选中的内容
const p = point.value;
//获取输入框中，用户输入放入内容
const text = texts.value;
//声明一个空字符串
let str = '';
//以下所有的if语句是用来判断下拉框选项中是否包含平台域名关键字的，如果有
if (p.includes('baidu')) {
//就拼接？+搜索关键字段+ ‘=’ + 用户搜索内容
//例如这里是百度，那么拼接的结果就是 ?wd=你好
str = '?' + arr[0] + '=' + text;
}
if (p.includes('bing')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('yandex')) {
str = '?' + arr[2] + '=' + text;
}
if (p.includes('juejin')) {
str = '?' + arr[3] + '=' + text;
}
if (p.includes('cnblogs')) {
str = '?' + arr[4] + '=' + text;
}
if (p.includes('jianshu')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('csdn')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('yuansu')) {
str = '?' + arr[6] + '=' + text;
}
if (p.includes('aigei')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('bilibili')) {
str = '?' + arr[5] + '=' + text;
}
if (p.includes('haiantv')) {
str = '/' + text + '/';
alert('该搜索比较缓慢，请您耐心等待');
}
console.log(p + str);
//最后我们利用页面跳转，跳转到指定的平台域名+搜索字段，就可以实现了
window.location.href = p + str;
}
//这里是判断用户选中的是不是觅元素，如果是，就要提示用户，需要输入拼音搜索
point.onchange = function() {
const p = point.value;
if (p.includes('yuansu')) {
texts.setAttribute('placeholder', '觅元素搜索请输入拼音，如：你好输入nihao');
}
}
//当用户点击确定（enter）键后，让搜索按钮模拟被点击
document.onkeyup = function(e) {
if (e.keyCode == 13) {
btn.click();
}
}
//如果是pc端，就启动背景切换
if (window.navigator.userAgent.match(/Windows/)) {
document.body.background
let index = 1;
setInterval(() => {
index++;
if (index > 5) {
index = 1;
document.body.style.background = `url(../images/beijing${index}.jpg)no-repeat center center/100% 100%`;
} else {
document.body.style.background = `url(../images/beijing${index}.jpg)no-repeat center center/100% 100%`;
}
}, 10000);
}
4、推荐给大家
好啦，这就是我做的一个简单的聚合搜索界面，个人觉得很方便，跨平台搜索再也不用跳转到平台站内后，然后再去搜索啦。如果你有需要，可以参考我的这个思路做一个自己的个性化搜索首页，如果大家时间有限，大家也可以用我的页面当作浏览器首页。
首页设置链接www.starqin920.cn/search/inde…
设置步骤：chrome为例
