原理说明

diy的本职工作是对如下连接的封装 http://visitor.kefu.techidea8.com/page/index/index?stitid=${siteid}

  • siteid 即企业ID

使用iframe展示

可以利用iframe展示连接

<iframe src="url"></iframe>

在jssdk中,我们是采用动态创建iframe的形式来展示url的

var jsdom =document.getElementById("techidea8kefujs")
iframe.setAttribute("style","width:100%;height:100%;border: none;")
iframe.setAttribute("scrolling","no")
iframe.setAttribute("frameborder","0")
iframe.setAttribute("marginwidth","0")
iframe.setAttribute("marginheight","0")
iframe.setAttribute("id","techidea8kefuiframe")
iframe.setAttribute("src","http://visitor.kefu.techidea8.com/pages/index/index?siteid="+siteid)

最后通过如下代码将iframe添加到页面中

document.body.appendChild(iframe)

支持拖动

为了操作方面,可以参考如下代码支持拖动

var divdrage = document.createElement("div")
//设置dom可拖动属性为trrue
divdrage.setAttribute("draggable","true")
var x=80, y=0;  //记录到点击时鼠标到移动框左边和上边的距离
//拖动停止时响应事件
divdrage.ondrop = function(e){
        e.preventDefault() || e.stopPropagation();  //不取消,firefox中会触发网页跳转到查找setData中r内容
    }

//拖动开始时响应事件
divdrage.ondragstart = function (e) {
        e.dataTransfer.effectAllowed = "move";  //移动效果
        e.dataTransfer.setData("text", '');  //附加数据, 没有这一项,firefox中无法移动
        return true;
    } 

//拖动位移过程事件
divdrage.ondrag = function (e) {
        //计算x和y的距离,然后设置目标domde 最新位移
        x = x - e.offsetX
        y = y - e.offsetY
        divwraper.style.right = x+ 'px';
        divwraper.style.bottom = y + 'px';
        //不取消,firefox中会触发网页跳转到查找setData中的内容
        e.preventDefault() || e.stopPropagation();  

    }
divdrage.ondragover = function (e) {
        e.preventDefault()|| e.stopPropagation();
    }

jQuery扩展支持

可以参考如下代码扩展成功jquery插件

//该函数实现客服界面的封装
function showkefu(){
    //封装iframe
    //添加到body中
}
//jQuery插件扩展代码
(function ($) {
  $.fn.extend({
    "showkefu": function () {
      showkefu()
    }
  });
})(jQuery);

//调用方法
//<img id="btnshowkefu"  src="..."/>
$("#btnkefu").click(function(){
    $(this).showkefu()
})

results matching ""

    No results matching ""