WebIM嵌入到网页的html片段如何不受主页面样式的影响

江边望海 · 6 年前

最近，开发了一个WEBIM。使用者只需要将WEBIM提供的js地址嵌入到自己的页面中就会在窗口右下角出现一个聊天窗口。
js中是在页面中插入一个div实现的聊天窗口悬浮的效果。
可是第三方网站嵌入后，聊天窗口会受到页面样式的影响，造成div的样式错位。
如何解决？

2 楼: JackJiang · 6 年前

你的方法用错了，你这个嵌入的聊天界面应该用iframe实现而不是div，如果是iframe就不会受影响，因为它相当于一个新的页面。主流的客服这个界面都是这样实现的，你随便找一家把它们的代码扒下来看看就明白了。

这个我做过，所以很确定的给你这个答案。

3 楼: 江边望海 · 6 年前

引用：JackJiang 发表于 2018-09-27 10:09
你的方法用错了，你这个嵌入的聊天界面应该用iframe实现而不是div，如果是iframe就不会受影响，因为它相当 ...

嗯嗯，后来我使用了iframe来实现，解决了这个问题。但是带来了新的问题。在firefox和chrome浏览器里面是可以的。但是在一切国产浏览器比如，傲游浏览器里面就不行了。

4 楼: 江边望海 · 6 年前

这是傲游浏览器的截图，在firefox和chrome里面没有这种错误提示的。

5 楼: JackJiang · 6 年前

引用：江边望海发表于 2018-09-27 11:40
这是傲游浏览器的截图，在firefox和chrome里面没有这种错误提示的。

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

我们之前的商业项目直接就去扒的别人代码参考的

6 楼: 大马仕格 · 6 年前

引用：江边望海发表于 2018-09-27 11:40
这是傲游浏览器的截图，在firefox和chrome里面没有这种错误提示的。

这是不是跨域访问限制？

7 楼: 江边望海 · 6 年前

引用：大马仕格发表于 2018-09-27 14:53
这是不是跨域访问限制？

应该是的

8 楼: luanhaipeng · 5 年前

跨域了啊。iframe和主页面要使用postMessage进行进程间通信就好了啊。

本文目录