您的位置:首页 > 运维架构 > 网站架构

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

2016-05-28 11:41 543 查看
这个功能在百度其实已经做得非常好了,这里借花献佛,记录下使用经验

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> ,否则搜索关键词会出现乱码。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: