自定义嵌入式选项卡
适用于：所有客户端
自定义嵌入式选项卡在客户端界面中显示 HTML 内容。您可以为 Cisco Jabber 创建自定义嵌入式选项卡定义。
 注 |
Jabber 嵌入式浏览器不支持通过启用 SSO 的网页与弹出窗口中共享 cookie。弹出窗口中的内容可能无法加载。 |
自定义嵌入式选项卡定义
<jabber-plugin-config>
<browser-plugin>
<page refresh="" preload="" internal="">
<tooltip></tooltip>
<icon></icon>
<url></url>
</page>
</browser-plugin>
</jabber-plugin-config>Cisco Jabber Windows 版本使用 Chromium 嵌入式框架在自定义嵌入式选项卡上显示内容。
Cisco Jabber Mac 版本使用 Safari WebKit 渲染引擎来显示嵌入式选项卡的内容。
下表说明了用于自定义嵌入式选项卡定义的参数：
| 参数 | 说明 | ||
|---|---|---|---|
|
browser-plugin |
包含自定义嵌入式选项卡的所有定义。 该值包括所有自定义选项卡定义。 |
||
|
page |
包含一个自定义嵌入式选项卡定义。 |
||
|
refresh |
控制何时刷新内容。
此参数是可选的，并且是页面元素的属性。 |
||
|
preload |
控制何时加载内容。
此参数是可选的，并且是页面元素的属性。 |
||
|
tooltip |
定义自定义嵌入式选项卡的悬停文本。 此参数是可选的。如果没有指定悬停文本，客户端将使用自定义选项卡。 该值为 Unicode 字符串。 |
||
|
图标 |
指定选项卡的图标。您可以按如下方式指定本地或托管图标：
您可以使用客户端浏览器可以渲染的任何图标，包括 .JPG、.PNG 和 .GIF 格式。 此参数是可选的。如果您未指定图标，客户端会从 HTML 页面加载 favicon（首选图标）。如果没有可用的 favicon，客户端会加载默认图标。 |
||
|
url |
指定嵌入式选项卡内容所在的 URL。 客户端使用浏览器渲染引擎来显示嵌入式选项卡的内容。因此，您可指定浏览器支持的任何内容。 对于 Cisco Jabber Mac 版本，URL 元素必须包含 HTTP 或 HTTPS。 此参数为必选。
例如，假设您将 |
||
|
机构内部 |
指定您的网页是网络的内部页面还是外部页面。
|
用户自定义选项卡
您可以允许用户通过客户端用户界面指定自定义嵌入式选项卡的选项卡名称和 URL。用户无法为自定义嵌入式选项卡设置其他参数。
将 AllowUserCustomTabs 设置为 true，然后用户才能自定义其选项卡：
<Options>
<AllowUserCustomTabs>true</AllowUserCustomTabs>
</Options>注 |
AllowUserCustomTabs 的默认值为 true。 |
自定义图标
-
尺寸：20 x 20 像素
-
透明背景
-
PNG 文件格式
从自定义选项卡聊天和呼叫
- 使用 XMPP: 或 IM: 协议处理程序启动聊天。
- 使用 TEL: 协议处理程序启动音频和视频呼叫。
用户 ID 令牌
您可以指定 ${UserID} 令牌作为 url 参数值的一部分。用户登录时，客户端会将 ${UserID} 令牌替换为已登录用户的用户名。
 提示 |
您还可以在查询字符串中指定 ${UserID} 令牌；例如，www.cisco.com/mywebapp.op?url=${UserID}。 |
-
您可以在自定义嵌入式选项卡中指定以下内容：
<url>www.cisco.com/${UserID}/profile</url> -
Mary Smith 登录。她的用户名是 msmith。
-
客户端会将 ${UserID} 令牌替换为 Mary 的用户名，如下所示：
<url>www.cisco.com/msmith/profile</url>
JavaScript 通知
您可以执行自定义嵌入式选项卡中的 JavaScript 通知。此主题说明客户端为 JavaScript 通知提供的方法。此主题还提供用于测试通知的示例 JavaScript 表格。此文档不包括说明如何为异步服务器呼叫及其他自定义实施执行 JavaScript 通知。您应该参阅适当的 JavaScript 文档，以了解详细信息。
通知方法
客户端包括为 JavaScript 通知提供以下方法的界面：
-
SetNotificationBadge — 您可以在 JavaScript 中从客户端呼叫此方法。此方法使用可以具有任意以下值的字符串值：
-
空 — 空值会删除任何现有的通知标志。
-
从 1 到 999 的数
-
两位字母数字组合，例如 A1
-
-
onPageSelected() — 当用户选择自定义嵌入式选项卡时，客户端会调用此方法。
-
onPageDeselected() — 当用户选择另一个选项卡时，客户端会调用此方法。
注 |
不适用于 Jabber iPhone 和 iPad 版本 |
-
onHubResized() — 当用户调整客户端中央窗口大小或移动该窗口时，客户端会调用此方法。
-
onHubActivated() — 客户端中央窗口激活后，客户端会调用此方法。
-
onHubDeActivated() — 客户端中央窗口停用后，客户端会调用此方法。
订阅自定义选项卡中的在线状态
您可以使用以下 JavaScript 功能订阅联系人的在线状态，并从客户端接收在线状态更新：
-
SubscribePresence() — 使用用户的 IM 地址为此方法指定字符串值。
-
OnPresenceStateChanged — 此方法使用户能够基于联系人的在线状态从客户端接收更新。您可以指定以下值之一作为字符串：
-
IM 地址
-
基本在线状态（有空、离开、离线、免打扰）
-
多样的在线状态（会议中、呼叫中或自定义在线状态）
-
注 |
|
在自定义选项卡中获取区域设置信息
您可以使用以下 JavaScript 功能从客户端检索联系人的当前区域设置信息：
-
GetUserLocale() — 此方法使用户能够从客户端请求区域设置信息。
-
OnLocaleInfoAvailable — 此方法使用户能够从客户端接收区域设置信息。您可以使用包含客户端区域设置信息的字符串值。
注 |
Jabber iPad 和 iPhone 版本仅支持 OnLocaleInfoAvailable。 |
示例 JavaScript
以下代码是使用 JavaScript 显示您可以在其中输入从 1 到 999 之间数字表格的 HTML 页面示例：
<html>
<head>
<script type="text/javascript">
function OnPresenceStateChanged(jid, basicPresence, localizedPresence)
{
var cell = document.getElementById(jid);
cell.innerText = basicPresence.concat(", ",localizedPresence);
}
function GetUserLocale()
{
window.external.GetUserLocale();
}
function SubscribePresence()
{
window.external.SubscribePresence('johndoe@example.com');
}
function OnLocaleInfoAvailable(currentLocale)
{
var cell = document.getElementById("JabberLocale");
cell.innerText = currentLocale;
}
function onHubActivated()
{
var cell = document.getElementById("hubActive");
cell.innerText = "TRUE";
}
function onHubDeActivated()
{
var cell = document.getElementById("hubActive");
cell.innerText = "FALSE";
}
function onHubResized()
{
alert("Hub Resized or Moved");
}
function OnLoadMethods()
{
SubscribePresence();
GetUserLocale();
}
</script>
</head>
<body onload="OnLoadMethods()">
<table>
<tr>
<td>John Doe</td>
<td id="johndoe@example.com">unknown</td>
</tr>
</table>
<table>
<tr>
<td>Jabber Locale: </td>
<td id="JabberLocale">Null</td>
</tr>
<tr>
<td>Hub Activated: </td>
<td id="hubActive">---</td>
</tr>
</table>
</body>
</html>要测试此示例 JavaScript 表格，请将上面的示例复制到 HTML 页面中，然后将此页面指定为自定义嵌入式选项卡。
在自定义选项卡中显示呼叫事件
您可以使用以下 JavaScript 函数在自定义选项卡中显示呼叫事件：
OnTelephonyConversationStateChanged — 电话服务中的 API 使客户端能够在自定义嵌入式选项卡中显示呼叫事件。自定义选项卡可以实施 OnTelephonyConversationStateChanged JavaScript 功能。每当电话对话状态发生变化时，客户端都会调用此函数。该函数接受客户端解析的 JSON 字符串以获取呼叫事件。
以下代码段显示容纳呼叫事件的 JSON：
{
"conversationId": string,
"acceptanceState": "Pending" | "Accepted| | "Rejected",
"state": "Started" | "Ending" | "Ended",
"callType": "Missed" | "Placed" | "Received" | "Passive" | "Unknown",
"remoteParticipants": [{participant1}, {participant2}, …, {participantN}],
"localParticipant": {
}
}JSON 中的每个参与者对象均可具有以下属性：
{
"voiceMediaDisplayName": "<displayName>",
"voiceMediaNumber": "<phoneNumber>",
"translatedNumber": "<phoneNumber>",
"voiceMediaPhoneType": "Business" | "Home" | "Mobile" | "Other" | "Unknown",
"voiceMediaState": "Active" | "Inactive" | "Pending" | "Passive" | "Unknown",
}以下是此函数在自定义嵌入式选项卡中的示例实施。此示例获取 state 和 acceptanceState 属性的值，并在自定义选项卡中显示这些值。
function OnTelephonyConversationStateChanged(json) {
console.log("OnTelephonyConversationStateChanged");
try {
var conversation = JSON.parse(json);
console.log("conversation id=" + conversation.conversationId);
console.log("conversation state=" + conversation.state);
console.log("conversation acceptanceState=" + conversation.acceptanceState);
console.log("conversation callType=" + conversation.callType);
}
catch(e) {
console.log("cannot parse conversation:" + e.message);
}
}以下是此函数的示例实施，其中包含所有可能的字段：
function OnTelephonyConversationStateChanged(json) {
console.log("OnTelephonyConversationStateChanged");
try {
var conversation = JSON.parse(json);
console.log("conversation state=" + conversation.state);
console.log("conversation acceptanceState=" + conversation.acceptanceState);
console.log("conversation callType=" + conversation.callType);
for (var i=0; i<conversation.remoteParticipants.length; i++) {
console.log("conversation remoteParticipants[" + i + "]=");
console.log("voiceMediaDisplayName=" + conversation.remoteParticipants[i].voiceMediaDisplayName);
console.log("voiceMediaNumber=" + conversation.remoteParticipants[i].voiceMediaNumber);
console.log("translatedNumber=" + conversation.remoteParticipants[i].translatedNumber);
console.log("voiceMediaPhoneType=" + conversation.remoteParticipants[i].voiceMediaPhoneType);
console.log("voiceMediaState=" + conversation.remoteParticipants[i].voiceMediaState);
}
console.log("conversation localParticipant=");
console.log(" voiceMediaDisplayName=" + conversation.localParticipant.voiceMediaDisplayName);
console.log(" voiceMediaNumber=" + conversation.localParticipant.voiceMediaNumber);
console.log(" translatedNumber=" + conversation.localParticipant.translatedNumber);
console.log(" voiceMediaPhoneType=" + conversation.localParticipant.voiceMediaPhoneType);
console.log(" voiceMediaState=" + conversation.localParticipant.voiceMediaState);
}
catch(e) {
console.log("cannot parse conversation:" + e.message);
}
}
自定义嵌入式选项卡示例
<?xml version="1.0" encoding="utf-8"?>
<config version="1.0">
<Client>
<jabber-plugin-config>
<browser-plugin>
<page refresh ="true" preload="true">
<tooltip>Cisco</tooltip>
<icon>https://www.cisco.com/web/fw/i/logo.gif</icon>
<url>https://www.cisco.com</url>
</page>
</browser-plugin>
</jabber-plugin-config>
</Client>
</config>
反馈