在 IE 中直接使用 Polyfill ES5

Question

我目前在使用 Microsoft 的 botchat 框架时遇到问题。

本质上，他们是说要使框架在 IE 中运行，您所要做的就是更改他们的网络聊天-es5.js 版本的脚本。但是，这在 IE 中仍然根本不起作用。我正在使用 IE 11。所有其他浏览器都可以正常工作，除了 IE。

有人可以给我指出正确的方向，以便我可以让这个 ChatBot 在 IE 中实际工作吗？

这是我用于所有这些东西的代码：

相关JavaScript：

 const styleOptions =
    {
        accent: '#0063B1',
        backgroundColor: 'White; border:2px solid #23447e; border-radius: 25px; padding-top:20px',
        cardEmphasisBackgroundColor: '#F0F0F0',
        paddingRegular: 10,
        paddingWide: 10 * 2,
        subtle: '#767676',
        bubbleBackground: '#CCCCCC',
        bubbleBorder: 'solid 1px #E6E6E6',
        bubbleBorderRadius: 10,
        bubbleFromUserBackground: '#0084ff',
        bubbleFromUserBorder: 'solid 1px #E6E6E6',
        bubbleFromUserBorderRadius: 10,
        bubbleFromUserTextColor: 'White',
        bubbleImageHeight: 100, //240,
        bubbleMaxWidth: 480, // screen width = 600px
        bubbleMinHeight: 40,
        bubbleMinWidth: 250, // min screen width = 300px, Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
        bubbleTextColor: 'Black',
        // Send box
        hideSendBox: false,
        hideUploadButton: false,
        microphoneButtonColorOnDictate: '#F33',
        sendBoxBackground: 'White',
        sendBoxButtonColor: '#767676',
        sendBoxButtonColorOnDisabled: '#CCC',
        sendBoxButtonColorOnFocus: '#333',
        sendBoxButtonColorOnHover: '#333',
        sendBoxHeight: 40,
        sendBoxMaxHeight: 200,
        sendBoxTextColor: 'Black',
        sendBoxBorderBottom: '',
        sendBoxBorderLeft: '2px solid #23447e; border-radius: 25px',
        sendBoxBorderRight: '2px solid #23447e; border-radius: 25px',
        sendBoxBorderTop: '2px solid #23447e; border-radius: 25px',
        sendBoxPlaceholderColor: '#23447e',
        sendBoxTextWrap: false,
        typingAnimationBackgroundImage: 'https://support.signal.org/hc/article_attachments/360016877511/typing-animation-3x.gif',
        spinnerAnimationBackgroundImage: 'https://support.signal.org/hc/article_attachments/360016877511/typing-animation-3x.gif',
        avatarSize: 80,
        botAvatarImage: 'https://s3.gifyu.com/images/oie_3BXuLVEkv2Ad.gif',
        userAvatarImage: 'https://i.ibb.co/5xz4X4P/kissclipart-generic-person-icon-clipart-computer-icons-person-96a092499db1d0d3.png',
        botAvatarInitials: '',
        userAvatarInitials: ''
    };

const token = 'MY TOKEN SECRET IS HERE';

const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        dispatch({
            type: 'WEB_CHAT/SEND_EVENT',
            payload: {
                name: 'webchat/join',
                value: { language: window.navigator.language }
            }
        });
    }
    return next(action);
});



window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token }),
    styleOptions
}, document.getElementById("webchat"));

我也试过他们的其他版本 rendering/creating 网络聊天：

window.fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
.then(function (res) {
  return res.json();
})
.then(function (json) {
  const token = json.token;
  window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({
      token: token
    })
  }, document.getElementById('webchat'));
  document.querySelector('#webchat > *').focus();
});

使用这个实例化版本，它在 IE 中仍然不起作用，在其他浏览器中，它从 GitHub 加载 MockBot，而不是我自己的聊天机器人。

Answer 1

不支持 IE11 中的箭头函数，因此您存储中间件导致了问题。看看下面的代码片段。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Full-featured bundle with ES5 polyfills</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script>

      // This code is modified to run in browser without async and Promise support
      window.fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
        .then(function (res) {
          return res.json();
        })
        .then(function (json) {
          const token = json.token;

          const store = window.WebChat.createStore(
            {}, 
            function(store) {
              return function(next) {
                return function(action) {
                  if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    store.dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: { language: window.navigator.language }
                        }
                    });
                  }
                  return next(action);
                }
              }
            }
          );

          window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({
              token: token
            }),
            store: store
          }, document.getElementById('webchat'));

          document.querySelector('#webchat > *').focus();
        });
    </script>
  </body>
</html>

希望对您有所帮助！

在 IE 中直接使用 Polyfill ES5

Directline with Polyfill ES5 in IE

javascript

html

chatbot

web-chat