百度商桥毕竟是BAT公司开发的一款网页聊天软件，关键还免费，所以用户量还是非常多的。

然而，不少客户测试了百度商桥“沟通窗口”中的“新页面”和“小浮窗”功能均不能实现。

这么大的BUG吗？

那咱们做无锡网站开发马氪软件不能袖手旁观，得在有限的条件内创造出更多可能！

【目标】实现点击“立即咨询”触发弹窗（而不是打开新窗口聊天），在当前页面直接聊天

不多说，直接上代码，如下：

1、引入CSS样式文件

<style type="text/css">

   #tip { position: absolute; right: 0px;

    bottom: 0px;  height: 0px;

    width: 502px;  border: 1px solid #CCCCCC;

    background-color: #eeeeee;  padding: 1px;

    overflow: hidden; display: none;

    font-size: 12px; z-index: 10;

   }

   #tip p { padding: 1px;}

   #tip h1 { font-size: 16px; height: 25px;

    line-height: 25px; background-color: #0076fc;

    color: #FFFFFF; padding: 0px 3px 0px 3px;

    filter: Alpha(Opacity = 100);

   }

   #tip h1 a, #detail h1 a { float: right;

    text-decoration: none; color: #FFFFFF;

   }

</style>

2、引入JavaScript代码

<script type="text/javascript">

   window.onload = function(){

    var divTip = document.createElement("div");

    divTip.id = "tip";

    divTip.innerHTML = "<h1><a href='javascript:void(0)' onclick='start()'>关闭</a>在线客服</h1><p><iframe src='此处填写你的百度商桥独立沟通链接' scrolling='no' width='100%' height='580'></iframe></p>";

    divTip.style.height = '0px';

    divTip.style.bottom = '0px';

    divTip.style.position = 'fixed';

    document.body.appendChild(divTip);

   }

   var handle;

   function start(count){

    var obj = document.getElementById("tip");

    if (parseInt(obj.style.height) == 0) {

     obj.style.display = "block";

     handle = setInterval("changeH('up')", 20);

    }

    else {

     handle = setInterval("changeH('down')", 20)

    }

   }

   function changeH(str){

    var obj = document.all ? document.all["tip"] : document.getElementById("tip"); 

    if (str == "up") {

     if (parseInt(obj.style.height) > 400) 

      clearInterval(handle);

     else

      obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";

    }

    if (str == "down") {

     if (parseInt(obj.style.height) < 8) {

      clearInterval(handle);

      obj.style.display = "none";

     }

     else

      obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";

    }

   }

   function showwin(){

    start();

   }

</script>

3、如何使用呢？

例如：在您网页中需要使用到客服的地方调用  <a href="#" onclick="start()">立即咨询</a>

注意：a标签的href是需要写成“#”伪链接。为防弹到页面上方，可以将#换成javascript:;或javascript:void(0)。

【总结】

无锡做网站公司-马氪软件本次分享的就是实现了百度商桥在当前页面中调用，不需要再次弹窗到新页面中进行聊天，用户体验更高。

从右下角缓慢上移，打开聊天窗口（并且是带关闭按钮的哦），直接把百度商桥的“BUG”解决了，您可以更好地优化以符合您自己的网站风格。

 

/* 2020年9月4日更新记录 */

 同样是来自网上的一位客户，需要完成百度商桥弹出框的效果制作，原本是很简单的一个过程，但是着实让咱领略到了百度商桥爱番番的鸡肋。

咱们下面就以这位客户的需求来进一步阐述：

1、除了产品页面，点击右侧在线客服能够弹出百度商桥对话框，而不是在新页面显示窗口

点击弹出对话框其实就用咱们上文中讲到的方法即可，但是客户后面提出一个要求，看能不能小窗口显示。那之前的方式咱们只能暂时搁置，想想别的辙弹出小窗口对话框。

咱们看下爱番番，在基础设置—站点—获取代码—（直接把一段加在</head>标签前的代码加进去）

然后要做的一步很重要，需要调用点击弹出小窗口的地方，增加一段代码 id="nb_icon_wrap"，那样点击的时候就完美弹出了小型窗口的对话框了。

 

可以自由拖动倒是百度商桥当初一个很好的设计，只不过这个小对话框是无法更改窗口最初的显示位置。

2、产品页面价格下方的[ 在线咨询 ]点击也需要弹出百度商桥对话框

开始我们想当然得以为可以直接参考第一种需求将a标签中添加id="nb_icon_wrap"，那样不就能触发百度商桥对话框了吗？

果真想当然，百度商桥又一BUG出现了：同一个页面里不能共存两个点击弹出对话框！？搞笑吧，不肯调用多个。

那怎么办呢？折中做法，咱们在[ 在线咨询 ]部分，沿用我们之前的做法，制作一个弹出框，把百度商桥/爱番番的对话框用iframe嵌套。

此处我们注意到，嵌套的方式就是调用独立沟通链接。而我们会发现，其实独立沟通链接的窗口是比较大一些的，无法获取到小窗口状态下的聊天对话框。

后面客户测试了一下效果，对于电脑端效果满意，但是手机端也非常想实现两个小窗口对话框，那样就完美了。

 

不过遗憾的是，调试过多种方式手机端的效果确实是有一点问题就是弹出来框是可以，但是百度商桥的对话框根本就无法正常显示。导致后面客户最后基于百度商桥的界面鸡肋，想想还是取消了百度商桥的使用。

有的人会提出异议了，你不是用了iframe嵌套百度商桥的聊天窗口嘛，再改一下他聊天窗口里的CSS样式不就好了吗？

的确，这是个非常好的建议。不过要想修改iframe嵌套的内容，不可避免得就得考虑“iframe跨域问题”。细想一下：咱是嵌套的百度的网站，请问能轻而易举跨域修改了百度商桥聊天窗口的内部结构样式，那是不是意味着百度的系统不安全，咱的能耐大到能几分钟轻松入侵百度啦？想想我都笑了。

 

【延伸一下】客户找咱做网站是信任，咱也得尽全力给客户提供好的解决方案。后面我们也思考过有没有更加折中的方式，比如再新建一个移动站点，自定义一下站点URL，然后调用到客户的产品页面[ 在线咨询 ]部分，那样的话应该就能够实现在移动端也调用出小窗口的对话框了，这个大家可以求证一下。

至此，其实不难看出，百度商桥/爱番番的优势在于免费、APP操作灵活、数据分析功能简洁强大明了。但是缺陷也很明显，可定制性不高。

真心希望百度官方能够尽量完善一下百度商桥/爱番番的界面灵活定制功能，好的产品大家使用得方便才能更好。 

本文链接：http://mkapps.cn/news/ask/303.html