Question

我开发了一个Azure聊天机器人v4，并且可以使用Chrome和其他浏览器运行它，但是不能在Internet Explorer（我使用IE11）中显示该组件，但不能显示聊天文本。

我已经添加了库https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js，它似乎可以正常工作，但是如果我写了一些东西，文本不会显示出来（但是每次我写东西时，它都会调用https://directline.botframework.com/v3/directline/conversations/ ...返回200，因此它似乎可以正常工作，但是没有...）

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js"></script>
    </head>

    <body>
        <div class="wrapper">
            <header class="header">
                ...
            </header>
            <div id="webchat" class="botChat" role="main"></div>
        </div>
        <script  type="text/javascript" language="JavaScript">
            var styleOptions = {
                bubbleBackground: 'rgba(217, 229, 244, 1)',
                bubbleFromUserBackground: 'rgba(250, 230, 238, 1)',
                rootWidth: '100%',
                innerWidth: '80%',
            };

            var botConnection = new window.WebChat.createDirectLine({
                token: "mytoken"
            });

            window.WebChat.renderWebChat({
                directLine: botConnection,
                styleOptions: styleOptions
            }, document.getElementById('webchat'));
        </script>
    </body>

为什么我看不到文字？（仅在IE上）

Answer 1

我们已经测试了该问题，发现可以使用Web Chat V4在IE 11中重现该问题。

要解决此问题，您可以尝试为div容器显式指定height和width属性，如下所示。

<div id="webchat">

<style>
    html, body {
        height: 100%
    }

    body {
        margin: 0
    }

    #webchat {
        height: 500px;
        width: 380px;
    }
</style>

测试结果：

使Azure聊天机器人v4在Internet Explorer中如何工作？

1 个答案: