kefu/static/js/kefu-front.js

733 lines
23 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

const KEFU={
KEFU_URL:"",
KEFU_KEFU_ID:"",
KEFU_ENT:"",
KEFU_LANG:"en",
KEFU_EXTRA: {},
KEFU_AUTO_OPEN:true,//是否自动打开
KEFU_SHOW_TYPES:1,//展示样式1普通右下角2圆形icon
KEFU_AUTO_SHOW:false,
KEFU_WITHOUT_BOX:false,
VISITOR_ID:"",
VISITOR_NAME:"",
VISITOR_AVATOR:"",
};
KEFU.launchButtonFlag=false;
KEFU.titleTimer=0;
KEFU.titleNum=0;
KEFU.noticeTimer=null;
KEFU.originTitle=document.title;
KEFU.chatPageTitle="KEFU";
KEFU.kefuName="";
KEFU.kefuAvator="";
KEFU.kefuIntroduce="";
KEFU.kefuDialogDelay="3000";
KEFU.offLine=false;
KEFU.TEXT={
"cn":{
"online_notice":"在线咨询",
"offline_notice":"离线留言",
},
"zh-CN":{
"online_notice":"在线咨询",
"offline_notice":"离线留言",
},
"en":{
"online_notice":"chat with us",
"offline_notice":"we are offline",
},
"ru":{
"online_notice":"Свяжитесь с нами",
"offline_notice":"Мы оффлайн",
},
"kr":{
"online_notice":"온라인 컨설팅",
"offline_notice":"오프라인",
},
};
// 设置重连时间间隔(单位:毫秒)
KEFU.RECONNECT_INTERVAL = 1000;
// 设置最大重连次数
KEFU.MAX_RECONNECT_TIMES = 3;
KEFU.reconnectTimes = 0;
KEFU.ws=null;
KEFU.init=function(config){
var _this=this;
if (!config) { config = {}; }
for (var key in KEFU) {
if (typeof config[key] !== 'undefined') {
this[key] = config[key];
} else {
this[key] = KEFU[key];
}
}
if (typeof config.KEFU_URL!="undefined"){
this.KEFU_URL=config.KEFU_URL.replace(/([\w\W]+)\/$/,"$1");
}
this.dynamicLoadCss(this.KEFU_URL+"/static/css/kefu-front.css?v="+Date.now());
this.dynamicLoadCss(this.KEFU_URL+"/static/css/layui/css/layui.css?v="+Date.now());
var refer=document.referrer?document.referrer:"none";
this.KEFU_EXTRA.refer=refer;
this.KEFU_EXTRA.host=document.location.href;
this.KEFU_EXTRA=JSON.stringify(_this.KEFU_EXTRA);
this.dynamicLoadJs(this.KEFU_URL+"/static/js/functions.js?v=1",function(){
if (typeof config.KEFU_LANG!="undefined"){
_this.KEFU_LANG=config.KEFU_LANG;
}else{
_this.KEFU_LANG=checkLang();
}
_this.KEFU_EXTRA=utf8ToB64(_this.KEFU_EXTRA);
// if(window.jQuery||typeof $=="function"){
// jQuery.noConflict();
// }
// if(window.jQuery||typeof $=="function"){
// _this.dynamicLoadJs(_this.KEFU_URL+"/static/js/layer/layer.js",function () {
// _this.jsCallBack();
// });
// }else{
_this.dynamicLoadJs(_this.KEFU_URL+"/static/js/jquery.min.js",function () {
jQuery.noConflict();
_this.dynamicLoadJs(_this.KEFU_URL+"/static/js/layer/layer.js",function () {
_this.jsCallBack();
});
});
//}
});
_this.addEventlisten();
}
KEFU.jsCallBack=function(){
var _this=this;
_this.connect();//网站监控
// if(_this.isMobile() && _this.KEFU_SHOW_TYPES!=0){
// _this.KEFU_SHOW_TYPES=2;
// }
_this.getNotice(function(welcomeInfo){
//展示的样式
switch(_this.KEFU_SHOW_TYPES){
case 1:
_this.showPcTips(welcomeInfo);
break;
case 2:
_this.showCircleIcon(welcomeInfo);
break;
case 3:
_this.showLineTips(welcomeInfo);
break;
default:
}
_this.addClickEvent();
});
}
//pc端的样式
KEFU.showPcTips=function(welcomeInfo){
var _this=this;
if(welcomeInfo.all_offline){
_this.KEFU_AUTO_OPEN=false;
var userInfo=KEFU.TEXT[_this.KEFU_LANG].offline_notice;
}else{
var userInfo=KEFU.TEXT[_this.KEFU_LANG].online_notice;
}
//自动展开
if(_this.KEFU_AUTO_OPEN&&_this.isIE()<=0){
setTimeout(function () {
_this.showKefu();
},_this.kefuDialogDelay);
}
var html=`
<div class='launchButtonBox'>
<div id="launchButton" class="launchButton">
<div id="launchIcon" class="launchIcon">1</div>
<div class="launchButtonText">
<img src="`+_this.KEFU_URL+`/static/images/wechatLogo.png"/>
<span class='flyUsername'>`+userInfo+`</span>
</div>
</div>
<div id="launchButtonNotice" class="launchButtonNotice"></div>
</div>
`
jQuery('body').append(html);
if(_this.KEFU_AUTO_OPEN || _this.isMobile()){
return;
}
if (!welcomeInfo.welcome) return;
var msgs = welcomeInfo.welcome;
var len=msgs.length;
var i=0;
if(len<=0) {
return;
}
var delaySecond=0;
for(let i in msgs){
var msg=msgs[i];
if(msg.delay_second){
delaySecond+=msg.delay_second;
}else{
delaySecond+=4;
}
var welcomeHtml="<div id='launchNoticeClose' class='flyClose'>×</div>"
var timer = setTimeout(function (msg) {
msg.content = replaceSpecialTag(msg.content);
welcomeHtml+="<div class='flexBox'><div class='flyUser'><img class='flyAvatar' src='"+_this.kefuAvator+"'/>"
+ "</div>"
+"<div class='launchNoticeContent' id='launchNoticeContent'>"
+replaceSpecialTag(msg.content,_this.KEFU_URL)+"</div></div>";
var obj=jQuery("#launchButtonNotice");
if(obj){
if(i==0){
obj.html(welcomeHtml).fadeIn();
}else if(i<msgs.length-1){
obj.html(welcomeHtml)
}else{
obj.html(welcomeHtml)
// setTimeout(function (obj) {
// obj.fadeOut();
// },5000,obj);
}
}
i++;
jQuery("#launchIcon").text(i).fadeIn();
},1000*delaySecond,msg);
}
}
//pc端的第二种样式
KEFU.showLineTips=function(welcomeInfo){
var _this=this;
//自动展开
if(_this.KEFU_AUTO_OPEN&&_this.isIE()<=0){
setTimeout(function () {
_this.showKefu();
},10000);
}
str=`
<div class="lineBox">
<div class="lineItem" onclick="javascript:KEFU.showPanel();">
<i class="layui-icon">&#xe606;</i>
</div>
<div class="lineItem">
<i class="layui-icon">&#xe677;</i>
<div class="lineTip lineWechat">
<img class="lineWechat" src="/static/images/wechat.jpg"/>
</div>
</div>
<div class="lineItem">
<i class="layui-icon">&#xe676;</i>
<div class="lineTip">
QQ:xxx
</div>
</div>
<div class="lineItem">
<i class="layui-icon">&#xe626;</i>
<div class="lineTip">
QQ:xxx
</div>
</div>
<div class="lineItem lineTop" id="launchTopButton">
<i class="layui-icon">&#xe604;</i>
</div>
</div>`
jQuery('body').append(str);
}
//圆形样式
KEFU.showCircleIcon=function(welcomeInfo){
var _this=this;
if(welcomeInfo.all_offline){
var imgUrl=KEFU.KEFU_URL+"/static/images/iconchat.png";
var tipText=KEFU.TEXT[this.KEFU_LANG].offline_notice
var imgHtml="<img class='flySimpleDefaultImg' src='"+imgUrl+"'/> ";
}else{
var imgUrl=_this.kefuAvator;
var tipText=KEFU.TEXT[this.KEFU_LANG].online_notice
var imgHtml="<img class='flySimpleUserImg' src='"+imgUrl+"'/> ";
}
if(welcomeInfo.welcome.length>0){
var tipText=replaceSpecialTag(welcomeInfo.welcome[0].content);
}
var html="<div class='flySimpleIconBox'>" +
"<div class='flySimpleIcon'>" +
imgHtml+
'</div>' +
"<div class='flySimpleIconTip'> " +tipText+
"<div class='flyClose'>×</div>" +
"</div>" +
'</div>';
jQuery('body').append(html);
setTimeout(function () {
jQuery(".flySimpleIconTip").fadeIn();
setTimeout(function () {
jQuery(".flySimpleIconTip").fadeOut();
},5000);
},_this.kefuDialogDelay);
window.addEventListener('message',function(e){
var msg=e.data;
if(msg.type=="message"){
jQuery(".flySimpleIconTip").html(replaceSpecialTag(msg.data.content,_this.KEFU_URL)+"<div class='flyClose'>×</div>").show();
setTimeout(function () {
jQuery(".flySimpleIconTip").fadeOut();
},5000);
}
if(msg.type=="force_close"){
kayer.close(kayer.index);
}
});
//自动展开
if(_this.KEFU_AUTO_OPEN&&_this.isIE()<=0){
setTimeout(function () {
_this.showKefu();
},5000);
}
}
KEFU.addClickEvent=function(){
var _this=this;
var launchButton=jQuery("#launchButton");
if(launchButton){
launchButton.on("click",function() {
if(_this.launchButtonFlag){
return;
}
_this.KEFU_AUTO_SHOW=true;
_this.showKefu();
jQuery("#launchIcon").text(0).hide();
});
}
jQuery("body").on("click","#launchNoticeClose",function() {
jQuery("#launchButtonNotice").fadeOut();
});
jQuery("body").on("click",".flySimpleIconTip",function() {
jQuery(".flySimpleIconTip").fadeOut();
});
jQuery("body").on("click","#launchTopButton",function() {
jQuery('body,html').scrollTop(0);
});
jQuery("body").on("mouseover mouseout",".lineItem",function(event) {
if(event.type == "mouseover"){
//鼠标悬浮
jQuery(this).find(".lineTip").show();
}else if(event.type == "mouseout"){
//鼠标离开
jQuery(".lineTip").hide();
}
});
jQuery("body").click(function () {
clearTimeout(_this.titleTimer);
document.title = _this.originTitle;
//剪贴板
try{
var selecter = window.getSelection().toString();
if (selecter != null && selecter.trim() != ""){
var str=selecter.trim().substr(0,20);
_this.postMessageToIframe(str);
}
} catch (err){
var selecter = document.selection.createRange();
var s = selecter.text;
if (s != null && s.trim() != ""){
var str=s.trim().substr(0,20);
_this.postMessageToIframe(str);
}
}
});
var ms= 1000*2;
var lastClick = Date.now() - ms;
jQuery("a,div,p,li,span,h1,h2,h3,h4,h5,h6").mouseover(function(){
if (Date.now() - lastClick >= ms) {
lastClick = Date.now();
var msg=jQuery(this).text().trim().substr(0,20);
_this.postMessageToIframe(msg);
}
});
jQuery("body").on("click",".flySimpleIcon",function() {
_this.showPanel();
});
}
KEFU.postMessageToIframe=function(str){
var msg={}
msg.type='inputing_message';
msg.content=str;
this.postToIframe(msg);
}
KEFU.postToIframe=function(messageObj){
var obj=document.getElementById('layui-layer-iframe19911116');
if(!obj||!messageObj){
return;
}
document.getElementById('layui-layer-iframe19911116').contentWindow.postMessage(messageObj, "*");
}
KEFU.addEventlisten=function(){
var _this=this;
window.addEventListener('message',function(e){
var msg=e.data;
if(msg.type=="message"){
clearInterval(_this.noticeTimer);
var width=jQuery(window).width();
if(width>768){
_this.flashTitle();//标题闪烁
}
if (_this.launchButtonFlag || _this.isMobile()){
return;
}
var welcomeHtml="<div id='launchNoticeClose' class='flyClose'>×</div>"
+"<div class='flexBox'><div class='flyUser'><img class='flyAvatar' src='"+_this.kefuAvator+"'/>"
+ "</div>"
+"<div class='launchNoticeContent' id='launchNoticeContent'>"
+replaceSpecialTag(msg.data.content,_this.KEFU_URL)+"</div></div>";
var obj=jQuery("#launchButtonNotice");
if(obj){
obj.html(welcomeHtml).fadeIn();
// setTimeout(function (obj) {
// obj.fadeOut();
// },3000,obj);
}
var news=jQuery("#launchIcon").text();
jQuery("#launchIcon").text(++news).show();
}
if(msg.type=="focus"){
clearTimeout(_this.titleTimer);
_this.titleTimer=0;
document.title = _this.originTitle;
}
if(msg.type=="force_close"){
kayer.close(kayer.index);
}
});
window.onfocus = function () {
clearTimeout(_this.titleTimer);
_this.titleTimer=0;
document.title = _this.originTitle;
_this.postToIframe({type:"focus"});
};
}
KEFU.dynamicLoadCss=function(url){
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type='text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
}
KEFU.dynamicLoadJs=function(url, callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.defer = true;
if(typeof(callback)=='function'){
script.onload = script.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){
callback();
script.onload = script.onreadystatechange = null;
}
};
}
head.appendChild(script);
}
//获取基础信息
KEFU.getNotice=function(callback){
var _this=this;
jQuery.ajax({
url: this.KEFU_URL+"/notice?ent_id="+this.KEFU_ENT,
type: "GET",
xhrFields: {
withCredentials: false
},
crossDomain: true,
success: function (res) {
if(!res) return;
if(typeof res =="string"){
res=JSON.parse(res);
}
var welcomeInfo=res.result;
_this.kefuIntroduce=welcomeInfo.ent_config.entIntroduce;
if(welcomeInfo.ent_config.autoOpenDialogTime){
_this.kefuDialogDelay=welcomeInfo.ent_config.autoOpenDialogTime;
}
_this.kefuAvator=getImageUrl(welcomeInfo.avatar,_this.KEFU_URL);
_this.kefuName=welcomeInfo.username;
_this.chatPageTitle=welcomeInfo.username;
_this.offLine=welcomeInfo.all_offline;
callback(welcomeInfo);
}
});
// jQuery.get(this.KEFU_URL+"/notice?ent_id="+this.KEFU_ENT,function(res) {
// if(!res) return;
// var welcomeInfo=res.result;
// _this.kefuIntroduce=welcomeInfo.ent_config.entIntroduce;
// if(welcomeInfo.ent_config.autoOpenDialogTime){
// _this.kefuDialogDelay=welcomeInfo.ent_config.autoOpenDialogTime;
// }
// _this.kefuAvator=getImageUrl(welcomeInfo.avatar,_this.KEFU_URL);
// _this.kefuName=welcomeInfo.username;
// _this.chatPageTitle=welcomeInfo.username;
// _this.offLine=welcomeInfo.all_offline;
//
// callback(welcomeInfo);
// });
}
KEFU.isIE=function(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie浏览器
}
}
KEFU.showPanel=function (){
var width=jQuery(window).width();
this.KEFU_AUTO_SHOW=true;
if(this.isIE()>0){
this.windowOpen();
return;
}
if(width<768){
this.layerOpen("100%","72%","rb");
return;
}
var width=380;
var height=560;
var x=document.documentElement.clientWidth-parseInt(width)-20;
var y=document.documentElement.clientHeight-parseInt(height);
this.layerOpen(width+"px",height+"px",[y,x]);
this.launchButtonFlag=true;
}
KEFU.showKefu=function (){
if (this.launchButtonFlag) return;
var width=jQuery(window).width();
if(this.isIE()>0){
this.windowOpen();
return;
}
if(width<768){
this.layerOpen("100%","72%","rb");
return;
}
var width=380;
var height=560;
var x=document.documentElement.clientWidth-parseInt(width)-20;
var y=document.documentElement.clientHeight-parseInt(height);
this.layerOpen(width+"px",height+"px",[y,x]);
this.launchButtonFlag=true;
jQuery(".launchButtonBox").hide();
}
KEFU.layerOpen=function (width,height,offset){
if (this.launchButtonFlag) return;
var layBox=jQuery("#layui-layer19911116");
if(layBox.css("display")=="none"){
this.launchButtonFlag=true;
layBox.show();
return;
}
var onlineStatus="<i class='kfBarStatus'></i>";
if(this.offLine){
onlineStatus="<i class='offline kfBarStatus'></i>";
}
var title=`
<div class="kfBar">
<div class="kfBarAvator">
<img src="`+this.kefuAvator+`" class="kfBarLogo">
</div>
<div class="kfBarText">
<div class="kfName">`+this.kefuName+ `&nbsp;` +onlineStatus+`</div>
<div class="kfDesc">`+this.kefuIntroduce+`</div>
</div>
<div class="kfBarBtn">
<a href="javascript:void(0)" class="cursor" id="btn-reload"><img src="`+this.KEFU_URL+`/static/images/en2.png"/></a>
</div>
</div>
`;
var _this=this;
if(!offset){
offset="rb";
}
var chatUrl=this.KEFU_URL+'/chatIndex?kefu_id='+this.KEFU_KEFU_ID+'&ent_id='+this.KEFU_ENT+'&show_title=no&lang='+this.KEFU_LANG+'&refer='+urlEncode(window.document.title)+'&url='+urlEncode(document.location.href)+'&extra='+this.KEFU_EXTRA;
if(this.VISITOR_ID!=""){
chatUrl+="&visitor_id="+this.VISITOR_ID;
}
if(this.VISITOR_NAME!=""){
chatUrl+="&visitor_name="+this.VISITOR_NAME;
}
if(this.VISITOR_AVATOR!=""){
chatUrl+="&avator="+this.VISITOR_AVATOR;
}
kayer.index="19911115";
kayer.open({
type: 2,
title: title,
skin:"kfLayer",
closeBtn: 1, //不显示关闭按钮
shade: 0,
area: [width, height],
offset: offset, //右下角弹出
anim: 2,
content: [chatUrl , 'yes'], //iframe的urlno代表不显示滚动条
move:false,
success:function(layero, index){
//切换语言
var iframe = layero.find('iframe'); // 获取到弹窗中的iframe元素
var btnReload = jQuery('#btn-reload img'); // 获取到按钮
var url=changeURLPar(chatUrl,"lang","en")
btnReload.on("click",function(e){
iframe.attr('src', url); // 重新加载iframe的内容
});
var layBox=jQuery("#layui-layer19911116");
_this.launchButtonFlag=true;
if(!_this.KEFU_WITHOUT_BOX&&_this.KEFU_AUTO_SHOW&&layBox.css("display")=="none"){
layBox.show();
}
jQuery("#layui-layer-iframe19911116 .chatEntTitle").hide();
},
end: function(){
_this.launchButtonFlag=false;
jQuery(".launchButtonBox").show();
},
cancel: function(index, layero){
jQuery("#layui-layer19911116").hide();
_this.launchButtonFlag=false;
jQuery(".launchButtonBox").show();
return false;
}
});
}
KEFU.windowOpen=function (){
window.open(this.KEFU_URL+'/chatIndex?kefu_id='+this.KEFU_KEFU_ID+'&lang='+this.KEFU_LANG+'&refer='+window.document.title+'&ent_id='+this.KEFU_ENT+'&extra='+this.KEFU_EXTRA);
}
KEFU.flashTitle=function () {
flashTitle();
}
// KEFU.flashTitleFunc=function(){
// this.titleNum++;
// if (this.titleNum >=3) {
// this.titleNum = 1;
// }
// if (this.titleNum == 1) {
// document.title = '【】' + this.originTitle;
// }
// if (this.titleNum == 2) {
// document.title = '【new message】' + this.originTitle;
// }
// }
/**
* 判断是否是手机访问
* @returns {boolean}
*/
KEFU.isMobile=function () {
if( /Mobile|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
return true;
}
return false;
}
/**
* 连接websocket
*/
KEFU.connect=function () {
var _this=this;
var domain=getDomainFromUrl(_this.KEFU_URL);
var protocol=getProtocolFromUrl(_this.KEFU_URL);
var wsProtocol="ws://";
if(protocol=="https"){
wsProtocol="wss://";
}
if(!this.KEFU_KEFU_ID){
return;
}
let ws = new WebSocket(wsProtocol+domain+"/ws_monitor?kefu_name="+this.KEFU_KEFU_ID);
ws.onopen = function () {
console.log('WebSocket 连接已打开');
_this.reconnectTimes = 0;
};
ws.onclose = function () {
console.log('WebSocket 连接已关闭');
// 尝试重连
_this.reconnect();
};
ws.onmessage = function (event) {
console.log(`收到服务器的消息:${event.data}`);
let data=event.data;
let message={
"type":"monitorOnline",
"data":{
"url":window.location.href,
"title":document.title,
"refer":document.referrer
}
}
if(data=="ok"){
ws.send(JSON.stringify(message))
}
if(data=="chat"){
_this.showPanel();
}
// // 解析消息
// const message = JSON.parse(event.data);
// if (message.type === 'message') {
// console.log(`收到消息:${message.data}`);
// }
};
_this.ws=ws;
}
// 尝试重连
KEFU.reconnect=function(){
var _this=this;
if (_this.reconnectTimes >= _this.MAX_RECONNECT_TIMES) {
console.log('重连失败');
return;
}
_this.reconnectTimes++;
console.log(`正在尝试重连(第 ${_this.reconnectTimes} 次)`);
setTimeout(function () {
_this.connect();
}, _this.RECONNECT_INTERVAL);
}