csdn很少上线,经常在掘金摸鱼,本文掘金链接https://juejin.cn/post/7058602557987356708
言归正传:
为什么要做这个小案例呢?
首先我有极度严重的强迫症,对于设备交互界面的追求是越整洁越好,另外由于我的专业原因,需要经常不断地跨平台搜索各种资料,所以我作做了一个结合百度、bing、Yandex、掘金、CSDN等于一体的搜索栏。
看看百度的搜索页
百度算是好的,有的搜索引擎一打开全是广告和弹窗,比如QQ浏览器。。。。
为了还自己一个干净的界面,同时提高搜索效率,于是我自己做了一个(下图)
我知道有很多大佬做过类似的浏览器插件,但是我做的这个是一个纯网页的,不需要大家安装,也没太多花里胡哨的内容(更轻便)
实现原理
主要技术路线:网页页面跳转 思路:
1、怎么将输入的内容提交到指定的平台
百度为例:当我们搜索“你好”时
地址栏地址:https://www.baidu.com/s?wd=你好
https是通信协议
www.baidu.com是网址(域名)
那么后的s?wd=你好 是什么意思呢?我们不妨将浏览器的地址改为https://www.baidu.com/s?wd=世界
原来 后面的字符对应的是我们需要搜索的内容,那我不就可以利用js将搜索栏的内容获取到后,做一个拼接,然后使用js跳转到拼接好的链接页面,就可以现实自制带有搜索功能的搜索栏了吗?
2、找规律
有了上述的理论基础,尝试各个平台搜索方式后发现其实现方式与百度类似,但是其具体的实现方式是有区别的具体如下
其他平台(如图)
3、写代码
我认为这个案例的html和js代码都很重要,所以重点分享这两个文件