iframe嵌套页面_让百度商桥爱番番弹出聊天小窗口而不是打开新页面的方法

来自网上的一位客户，需要我完成百度商桥弹出框的效果制作，原本是很简单的一个过程，但是着实让咱领略到了百度商桥爱番番的鸡肋。
咱们下面就以这位客户的需求来进一步阐述：

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

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

咱们看下爱番番，在基础设置—站点—获取代码—(直接把一段加在标签前的代码加进去)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ▼更多精彩推荐，请关注我▼ 不只关注互联网

博客地址：https://www.letus.top