HTML5+JavaScript实现搜索引擎聚合

来源：互联网 2023-03-16 23:58:55 版权归原作者所有，如有侵权，请联系我们

查找互联网内容时，一个搜索引擎的结果常常不能让人满意，在不同网站的搜索框之间来回复制粘贴搜素又十分的麻烦，本经验就介绍一种只用输入一次搜索内容，点击不同按钮即可在不同网站搜索的HTML5 JavaScript实现

HTML5 JavaScript实现搜索引擎聚合

工具/原料

大部分网站的搜索URL链接都采用search?q=搜索内容的形式，所以我们可以统一直接采用HTML5的formaction方法，向不同的网站提交表单，跳转到搜索界面

HTML5 JavaScript实现搜索引擎聚合

1本页面未经授权抓取自百度经验

input id="text" name="q" type="text" autofocus=true spellcheck="true" />

这里的name变量值为q，点击按钮后会向formaction的值的URL提交q=输入内容的表单

input type="submit" formaction="目标网站搜索URL" value="Google" id="submit" />

在formaction的值中输入目标网站/search即可定位到一般网站的搜索引擎，value定义的值即为按钮上显示的文字

对于采用不同方式定位搜索URL的网站，我们可以采用HTML5的button跳转到Javascript的function完成操作

HTML5 JavaScript实现搜索引擎聚合

例如baidu是以s?wd=搜索内容的形式定位搜索URL的，我们可以在上面做好的表单中加入一个button，然后用button的onclick值跳转到我们自己定义的Javascript函数baidu()

input type="button" value="Baidu" id="submit" onclick="baidu();" />

然后用JavaScript的方法获取之前表单输入框的搜索内容，并拼接成搜索URL，打开新页面跳转到搜索结果

text = document.getElementById('text').value;

url = '网站搜索URL' text;

window.open(url, '_blank');

HTML5 JavaScript实现搜索引擎聚合

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！