h5集成环信在线客服自定义窗口

自定义客服窗口从底部弹出

<!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>

相关阅读:
#1071 : 小玩具
#1063 : 缩地
#1124 : 好矩阵
hiho#1145 : 幻想乡的日常
hiho#14
hiho 毁灭者问题
西南民大oj（递推）
西南民大oj（矩阵快速幂）
西南民大oj（两园交求面积）
hdu2844（多重背包）

原文地址：https://www.cnblogs.com/6min/p/11661125.html