
# JS代码实例
|   环境要求   |                                --                                 |
|---|---|
| **引用库**  | jquery.js                                                         |
| **下载链接** | [index.html] |
   
![](https://support.huaweicloud.com/devg-agentlite-cec/public_sys-resources/notice_3.0-zh-cn.png)
- 本文档所述Demo在提供服务的过程中，可能会涉及个人数据的使用，建议您遵从国家的相关法律采取足够的措施，以确保用户的个人数据受到充分的保护。
  
- 本文档所述Demo仅用于功能演示，不允许客户直接进行商业使用。
  
- 本文档信息仅供参考，不构成任何要约或承诺。
  
 
 #### index.html
```
<!DOCTYPE html>
<!--
   Tutorial.
   Check available devices.
-->
<html>
<head>
    <title>Tutorial. Check devices</title>
    <meta charset="UTF-8" />
</head>
<body>
<!-- Check that browser is not IE -->
<script src="jquery-3.7.1.min.js"></script>
<script>
    // 当前demo写法需要引入jquery
    // 创建script标签并运行脚本
    const importScript = (function (oHead) {
        function loadError(oError) {
            throw new URIError("The script " + oError.target.src + " is not accessible.");
        }
        return function (sSrc, fOnload) {
            const oScript = document.createElement("script");
            oScript.type = "text\/javascript";
            oScript.onerror = loadError;
            if (fOnload) { oScript.onload = fOnload; }
            oHead.appendChild(oScript);
            oScript.innerHTML = sSrc;
        }
    })(document.head || document.getElementsByTagName("body")[0]);
    //配置请求参数，access_token为鉴权信息，tenantSpaceId为租间id，userAccount为登录账号,请参见表1
    const param = {
        "access_token": "xxxxx",
        "tenantSpaceId": "xxxxxxxxxxxxxx",
        "userAccount": "xxxxxxxxxx"
    }
    // callback 回调函数 用于处理轻量级接续的返回
    const callback = function (message) {
        // 可以根据 message.event 来做回调处理; message返回举例如下
        /**
         message:{
             event:{
                 content:"",
                 workNo:"",
                 eventType:""
             },
             message:"",
             retcode:"0"
         }
        **/
        console.log(message);
    }
    //定义变量$aicc_ContextPath，必须定义名称为$aicc_ContextPath，内容为https://ip:port或域名/service-cloud/
    const $aicc_ContextPath = "https://10.10.10.1:28090/service-cloud/";
    //发起请求，请求云客服并传递data内容（access_token / tenantSpaceId / userAccount）
    $.ajax({
        type: "post",
        data: JSON.stringify(param),
        url: $aicc_ContextPath+"ccdesktop/pages/cc-bar/js/ccbarclient.js?t=" + Math.random(),
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        },
        success: function (data) {
            //请求成功后执行js，云客服回传js,并动态生成接续条，目前暂不支持接续条样式和位置修改
            importScript(data)
            //以下为通过postmessage传递事件（座席状态）, 当座席收到以下事件，会触发eventpost的回调方法
            const param = new Array;
            param.push("AgentState_Busy");
            param.push("AgentState_Work");
            param.push("AgentState_Ready");
            param.push("AgentEvent_TransOutResult");
            const json = { name: "eventpost", param: param }
            //设定为3秒，确认页面已完成加载渲染，如果页面加载较慢，可以增大timeout的参数，如4000（4秒），5000（5秒）
            setTimeout(function(){ window.frames["ccbarclient"].postMessage(JSON.stringify(json), $aicc_ContextPath); }, 3000)
            //frames：ccbarclient, 是由 importScript 返回的data 动态生成的
            window.listeners["eventpost"] = callback;
        }
    });
</script>
<!--  HTML components of simple GUI -->
</body>
</html>
```
