本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

以编程方式断开 Amazon Connect 通信小部件的聊天会话

您可以通过调用存储在通信控件中的disconnect方法，使用 “” JavaScript 以编程方式断开通信小组件的iframe聊天会话。从小部件的主文档，您可以使用以下代码片段来引用 disconnect 函数：

document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect()

您可以很容易地将其添加到现有的小部件脚本中。以下是一个代码片段示例：

<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '...');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', '...');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
 
  // Add disconnect event listener
  window.addEventListener("pagehide", () => {
      document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
  });
</script>

实施和使用案例

通过编程方式调用断开连接功能在多种情况下都非常有用。它提供了在手动单击 End Chat 按钮之外何时终止对话的更多控制权。以下是一些何时调用 disconnect 的常见使用案例。

关闭或导航时

一个常见的使用案例是，将断开连接功能附加到浏览器或选项卡上下文被销毁时触发的事件上。pagehide 和 beforeunload 是在浏览器关闭时触发的常见事件。当用户刷新页面、导航到不同 URL 或者关闭选项卡或浏览器时，会触发这些事件。尽管在浏览器上下文被销毁时这两个事件都会被触发，但并不能保证 disconnect 函数能在浏览器的资源被清理完毕之前完全执行。

pagehide 是一个更现代的页面生命周期事件，受到所有主流浏览器和操作系统的支持。如果 pagehide 事件无法稳定地调用断开连接功能，可以尝试使用 beforeunload 作为替代事件。beforeunload 在 pagehide 之前触发，这可能为防止 disconnect 函数在浏览器关闭之前未能完成执行提供了额外的可靠性。beforeunload 存在可靠性问题，尤其是在 iOS 设备上。

以下是一个代码片段示例：

// Call disconnect when `beforeunload` triggers
window.addEventListener("beforeunload", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

// Call disconnect when `pagehide` triggers
window.addEventListener("pagehide", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

上下文切换时

另一个用例是在用户切换上下文时触发断开连接，例如当用户切换或最小化屏幕 tab/app 或锁定屏幕时。visibilitychange 事件可以可靠地处理上下文不再可见的这些场景。

以下是一个代码片段示例：

window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
    } else if (document.visibilityState === "visible") {
        ...
    }
});