自定义客服窗口从底部弹出
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <a href="javascript:OpenChat();">咨询客服</a> <!-- 自定义一个容器，嵌入iframe放客服窗口 --> <div id="frameChat" style="display:none; position:fixed; z-index:2000; bottom:0px; left:0px; right:0px; height:580px;background:#fff;"> <iframe id="chatFrame" src="kefu.html" style="height:100%;100%" frameborder="0"></iframe> </div> <script> let openchat = false; function OpenChat(){ openchat = true; document.getElementById('frameChat').style.display = ''; setTimeout(function(){ document.getElementById('chatFrame').contentWindow.document.getElementById('kefu').click(); },100); } function hideChat(){ openchat = false; document.getElementById('frameChat').style.display = 'none'; } //接收iframe发回的消息 window.addEventListener('message', function (e) { let data = e.data; if(data.c == 'hide'){ hideChat(); } if(data.c == 'msg' && !openchat){ let t = data.t.message.value; console.log(t); } }, false); </script> </body> </html>
kefu.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <a href='javascript:;' onclick='easemobim.bind({configId: "426fae41-c211-4a9c-b74e-088a1edf39e3"})' id="kefu" style="position:absolute; left:-1000px;">#</a> <script> window.easemobim = window.easemobim || {}; easemobim.config = { hide: true, autoConnect: true, hideKeyboard: true, visitor: { trueName: '', qq: '', phone: '', companyName: '', userNickname: '', description: '来源'+document.referrer, email: '' }, onmessage: function ( message ) { window.parent.postMessage({c:'msg', t:message}, '*'); } }; </script> <script src='//kefu.easemob.com/webim/easemob.js'></script> <script> const body = document.body; // 监听body的class属性变化 判断是否客服隐藏窗口 const observer = new MutationObserver(mutationsList => { if(body.getAttribute('class') != null && body.getAttribute('class').replace(/s+/g,"") == ''){ window.parent.postMessage({c:'hide'}, '*'); } }); observer.observe(body, { attributes: true, childList: true, subtree: true, }); </script> </body> </html>