Как сделать так, чтобы Azure Chat Bot v4 работал в Internet Explorer? - PullRequest
0 голосов
/ 11 июля 2019

Я разработал чат-бот 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)

1 Ответ

1 голос
/ 12 июля 2019

Мы проверили проблему и обнаружили, что мы можем воспроизвести проблему в IE 11, используя Web Chat V4.

Чтобы исправить ее, вы можете попытаться явно указать свойство высоты и ширины для контейнера div, как показано ниже.

<div id="webchat">

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

    body {
        margin: 0
    }

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

Результат теста:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...