Как заставить чат-бот azure v4 работать в Internet Explorer?

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

Почему я не вижу текст? (только в ИЕ)

Проверьте консоль JavaScript в инструментах разработчика (F12), какие-нибудь подсказки?

— 11.07.2019 17:36

в консоли нет ошибок

— 16.07.2019 15:00

javascript html azure internet-explorer chatbot

11.07.2019 15:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

269

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

<div id = "webchat">

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

    body {
        margin: 0
    }

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

Результат испытаний: