默认
开启辅助访问
发表评论 7
即时通讯网»社区 › 综合互动区 › 悬赏问答 › WebIM嵌入到网页的html片段如何不受主页面样式的影响
想开发IM：买成品怕坑？租第3方怕贵？找开源自已撸？别走弯路了... 找站长给点建议
推荐 方案：开源MobileIMSDK框架、RainbowChat产品、RainbowChat-Web产品、RainbowTalk(鸿蒙NEXT) / 官方技术群
WebIM嵌入到网页的html片段如何不受主页面样式的影响
阅读（91134） | 评论（7） 收藏 淘帖 赞
江边望海 Lv.2 7 年前 | 只看该作者 |只看大图 倒序浏览 |阅读模式
1金币
最近，开发了一个WEBIM。使用者只需要将WEBIM提供的js地址嵌入到自己的页面中就会在窗口右下角出现一个聊天窗口。
js中是在页面中插入一个div实现的聊天窗口悬浮的效果。
可是第三方网站嵌入后，聊天窗口会受到页面样式的影响，造成div的样式错位。
如何解决？



标签:Web端即时通讯
上一篇：跪求解答！不太理解这段Python解码WebSocket报文▪下一篇：为什么主流IM登录用HTTP，聊天用TCP，不可以一起用吗
相关文章
推荐方案
评论 7
2 楼: JackJiang Lv.9 精华之王 活跃开发者 黄金版主 终身成就 7 年前 | 只看该作者
你的方法用错了，你这个嵌入的聊天界面应该用iframe实现而不是div，如果是iframe就不会受影响，因为它相当于一个新的页面。主流的客服这个界面都是这样实现的，你随便找一家把它们的代码扒下来看看就明白了。

这个我做过，所以很确定的给你这个答案。
签名: 《socket长连接在手游场景下的的技术实践》http://www.52im.net/thread-4907-1-1.html
3 楼: 江边望海 Lv.2 楼主 7 年前 | 只看该作者
引用：JackJiang 发表于 2018-09-27 10:09
你的方法用错了，你这个嵌入的聊天界面应该用iframe实现而不是div，如果是iframe就不会受影响，因为它相当 ...

嗯嗯，后来我使用了iframe来实现，解决了这个问题。但是带来了新的问题。在firefox和chrome浏览器里面是可以的。但是在一切国产浏览器比如，傲游浏览器里面就不行了。
4 楼: 江边望海 Lv.2 楼主 7 年前 | 只看该作者
WebIM嵌入到网页的html片段如何不受主页面样式的影响_企业微信截图_53dc5073-9dbd-4696-909e-f4baa20fa5b9.png 这是傲游浏览器的截图，在firefox和chrome里面没有这种错误提示的。
5 楼: JackJiang Lv.9 精华之王 活跃开发者 黄金版主 终身成就 7 年前 | 只看该作者
引用：江边望海 发表于 2018-09-27 11:40
这是傲游浏览器的截图，在firefox和chrome里面没有这种错误提示的。

你随便找一家云客服，看看他们的这个客服组件运行情况不就明白了。

我们之前的商业项目直接就去扒的别人代码参考的
签名: 《socket长连接在手游场景下的的技术实践》http://www.52im.net/thread-4907-1-1.html
6 楼: 大马仕格 Lv.3 7 年前 | 只看该作者
引用：江边望海 发表于 2018-09-27 11:40
这是傲游浏览器的截图，在firefox和chrome里面没有这种错误提示的。

这是不是跨域访问限制？
签名: 不想上班，啦啦啦
7 楼: 江边望海 Lv.2 楼主 7 年前 | 只看该作者
引用：大马仕格 发表于 2018-09-27 14:53
这是不是跨域访问限制？

应该是的
8 楼: luanhaipeng Lv.1 6 年前 | 只看该作者
跨域了啊。iframe和 主页面要使用postMessage进行进程间通信就好了啊。
返回列表 发新帖 发表评论
打赏楼主 ×
使用微信打赏！ 使用支付宝打赏！
即时通讯技术的分享和传播需要您的支持，感谢打赏！

返回顶部