怎么在网站嵌入百度搜索框

简介: 这个功能在百度其实已经做得非常好了,这里借花献佛,记录下使用经验 1.效果 2.在div内嵌入 function checkHttps () { BaiduHttps.

这个功能在百度其实已经做得非常好了,这里借花献佛,记录下使用经验

1.效果

2.在div内嵌入

<div style='overflow:hidden'>
    <form onsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
    <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w"> 
    <input class='bdtext' type="text"  onfocus="checkHttps" name="word"  size="30">
    <input class='bdbtn' type="submit"value="百度搜索">
    </form>
    <script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
    <script>
        function checkHttps () {
            BaiduHttps.useHttps();    
        };
        function baiduWithHttps (formname) {
            var data = BaiduHttps.useHttps();
            if (data.s === 0) {
                return true;
            }
            else {
                formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
                return true;
            }
        };
    </script> 
</div>

3.这样在页面上看到的效果,input使用的是默认样式,这里把百度样式移植了过来

input.bdbtn {width: 65px;height: 28px;line-height: 28px;font: 12px \5b8b\4f53;cursor: pointer;outline: none;display: inline-block;text-align: center;color: #fff;border: none;background-color: #1a89ed;}
input.bdtext {width: 240px;padding-left: 5px;margin-left: 10px;margin-right: 10px;height: 22px;line-height: 22px;}

 

如果出现了乱码使用一下方法

提示:如果网页采用utf-8代码,则需要在代码中加入 <input name=ie type=hidden value=utf-8> ,否则搜索关键词会出现乱码。

 

相关文章
|
网络协议 Windows
网络连接正常但百度网页打不开显示无法访问此网站解决方案
网络连接正常但百度网页打不开显示无法访问此网站解决方案
687 0
网络连接正常但百度网页打不开显示无法访问此网站解决方案
|
6天前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
6天前
|
前端开发 安全 Go
无法通过 iframe 将百度首页嵌入到自己的前端应用里
无法通过 iframe 将百度首页嵌入到自己的前端应用里
310 0
|
10月前
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
150 1
|
10月前
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
342 0
|
6月前
|
负载均衡 应用服务中间件 nginx
百度搜索:蓝易云【提升网站性能:Nginx五种高效负载均衡策略】
希望以上信息对你有所帮助,如需更详细的配置和使用说明,建议参考Nginx官方文档或相关的教程资源。
58 0
|
7月前
|
缓存 负载均衡 应用服务中间件
百度搜索:蓝易云【提升网站性能:Nginx五种高效负载均衡策略详解!】
以上是Nginx常用的五种高效负载均衡策略。根据不同的应用场景和需求,选择合适的负载均衡策略可以提高网站性能和可靠性。在Nginx配置文件中,可以通过设置 `upstream`块来定义后端服务器列表和负载均衡策略。具体配置方法可以参考Nginx官方文档和相关资源,以获得更详细的说明和示例。
49 0
|
数据采集 存储 JSON
个人网站5-网站SEO优化推广和增加百度谷歌收录
个人网站5-网站SEO优化推广和增加百度谷歌收录
200 0
个人网站5-网站SEO优化推广和增加百度谷歌收录
WebApi入门第八章(模拟百度搜索框 )
WebApi入门第八章(模拟百度搜索框 )
56 0
WebApi入门第八章(模拟百度搜索框 )
|
数据可视化 程序员 Linux
全球 77.5% 的网站都在用 PHP;百度一程序员删库被判 9 个月;OpenCV 4.6 发布 | 思否周刊
全球 77.5% 的网站都在用 PHP;百度一程序员删库被判 9 个月;OpenCV 4.6 发布 | 思否周刊
155 0