3.3 示例：页内iframe形式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义按钮测试</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="keywords" content="telephone=no">
<meta name="description" content="自定义按钮测试">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.diy-btn {
width: 90px;
height: 36px;
line-height: 36px;
border: 1px solid #ccc;
background-color: #a36ceb;
position: fixed;
right: .5em;
bottom: .5em;
float: right;
cursor: pointer;
}
.diy-btn span {
display: inline-block;
}
.diy-btn .btn-name {
width: inherit;
height: inherit;
line-height: inherit;
color: #fff;
font-size: 16px;
text-align: center;
display: inline-block;
float: left;
}
.diy-btn .msg-num {
min-width: 12px;
height: 12px;
line-height: 12px;
border-radius: 12px;
background-color: #f00;
display: none;
position: absolute;
top: -9px;
left: -9px;
font-size: 12px;
color: #fff;
text-align: center;
padding: 3px;
}
.msg-unread {
width: 16em;
min-height: 3em;
max-height: 36em;
position: absolute;
bottom: 0em;
right: 10em;
background-color: #fff;
-webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,.25);
box-shadow: 0 1px 7px 0 rgba(0,0,0,.25);
border-radius: 3px;
padding: 1em;
border: 1px solid #aaa\9;
text-align: left;
overflow: auto;
color: #333;
font-size: 12px;
overflow: hidden;
cursor: auto;
display: none;
}
.msg-head {
height: 20px;
line-height: 1;
color: #a6a6a6
}
.msg-head span {
padding: 0 5px 0 0;
display: inline-block
}
.msg-name,.msg-time {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis
}
.msg-head .msg-close {
float: right;
position: relative;
top: -10px;
right: -10px;
cursor: pointer;
font-size: 16px;
font-weight: 700
}
.msg-close:hover {
color: red
}
.msg-desc {
width: 100%;
max-height: 4.5em;
color: #323232;
line-height: 1.5;
cursor: pointer;
overflow: hidden;
word-wrap: break-word;
word-break: normal;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
</style>
<!-- 插入插件代码 -->
<script type="text/javascript">
(function (w, d, s, i, v, j, b) {
w[i] = w[i] || function () {
(w[i].v = w[i].v || []).push(arguments)
};
j = d.createElement(s),
b = d.getElementsByTagName(s)[0];
j.async = true;
j.charset = "UTF-8";
j.src = "https://www.v5kf.com/[站点id]/v5kf.js";
b.parentNode.insertBefore(j, b);
})(window, document, "script", "V5CHAT");
</script>
</head>
<body>
<!-- 自定义按钮 -->
<div class="diy-btn" id="oBtn">
<span class="btn-name">在线客服</span>
<span class="msg-num"></span>
<div class="msg-unread">
<div class="msg-head">
<span class="msg-name"></span>
<span class="msg-time"></span>
<!-- <span class="msg-close">×</span> -->
</div>
<div class="msg-desc"></div>
</div>
</div>
<script type="text/javascript">
var msg = {
Num: {
num: 0,
time: 500,
timer: null,
isShow: true,
isBlink: true
},
UnRead: {
time: 8000,
timer: null,
isShow: true
}
};
var oBtn = document.querySelector('.diy-btn'),
oBtnName = document.querySelector('.btn-name'),
oMsgNum = document.querySelector('.msg-num'),
oMsgUnRead = document.querySelector('.msg-unread'),
oMsgName = document.querySelector('.msg-name'),
oMsgTime = document.querySelector('.msg-time'),
oMsgDesc = document.querySelector('.msg-desc');
V5CHAT('withoutBtn');
V5CHAT('onPluginLoad', function() {
V5CHAT('onChatShow', function () {
msg.Num.timer && clearTimeout(msg.Num.timer);
msg.Num.num = 0;
oMsgNum.innerHTML = '';
oMsgNum.style.display = 'none';
oMsgUnRead.style.display = 'none';
});
V5CHAT('onChatHide', function () {
V5CHAT('onMessage', function (res) {
if (v5frame.style.display === 'none') {
oMsgName.innerHTML = res.name;
oMsgTime.innerHTML = res.time;
oMsgDesc.innerHTML = oMsgDesc.title = res.msg;
if (msg.UnRead.isShow) {
msg.UnRead.timer && clearTimeout(msg.UnRead.timer);
oMsgUnRead.style.display = 'block';
msg.UnRead.timer = setTimeout(function() {
oMsgUnRead.style.display = 'none';
}, msg.UnRead.time);
}
msg.Num.num++;
oMsgNum.innerHTML = msg.Num.isShow ? (msg.Num.num > 99 ? '99+' : msg.Num.num) : '';
oMsgNum.style.display = 'block';
if (msg.Num.isBlink) {
msg.Num.timer && clearTimeout(msg.Num.timer);
msg.Num.timer = setInterval(function() {
oMsgNum.style.display = oMsgNum.style.display === 'block' ? 'none' : 'block';
}, msg.Num.time);
}
}
});
});
});
oBtn.onclick = function() {
var oV5Frame = document.querySelector('#v5frame');
if (oV5Frame && oV5Frame.style.display === 'block') {
V5CHAT('hideChat');
} else {
V5CHAT('showChat');
}
};
</script>
</body>
</html>