Javascript 如何修复在C#中开发的Web聊天机器人的HTML页面问题？使用SDK V4模板在IE 11浏览器中未打开？_Javascript_C#_Html_Botframework_Chatbot

Javascript 如何修复在C#中开发的Web聊天机器人的HTML页面问题？使用SDK V4模板在IE 11浏览器中未打开？

javascript c# html botframework

Javascript 如何修复在C#中开发的Web聊天机器人的HTML页面问题？使用SDK V4模板在IE 11浏览器中未打开？,javascript,c#,html,botframework,chatbot,Javascript,C#,Html,Botframework,Chatbot,我面临的问题是，我使用C#和bot framework V4开发了一个具有多个瀑布对话框的web聊天机器人，并使用Visual studio 2019成功地部署到azure上，没有任何错误。我使用一个HTML文件访问web频道聊天机器人。此HTML URL可在除IE 11之外的所有浏览器中打开，即在以下浏览器中工作良好：铬边缘火狐但当涉及到IE11时，它会抛出错误，聊天机器人永远不会打开。有时会出现错误，比如HTML中使用的JavaScript中的语法错误等等现在，我的问题是：如何编

我面临的问题是，我使用C#和bot framework V4开发了一个具有多个瀑布对话框的web聊天机器人，并使用Visual studio 2019成功地部署到azure上，没有任何错误。我使用一个HTML文件访问web频道聊天机器人。此HTML URL可在除IE 11之外的所有浏览器中打开，即在以下浏览器中工作良好：

铬

边缘

火狐

但当涉及到IE11时，它会抛出错误，聊天机器人永远不会打开。有时会出现错误，比如HTML中使用的JavaScript中的语法错误等等

现在，我的问题是：

如何编写或准备可以在所有类型浏览器中工作的HTML脚本文件？如何动态识别浏览器并基于此自动调用相关脚本

在Chrome中发布后，我正在使用下面的HTML文件访问我的聊天机器人

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat: Custom style options</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.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>
        (async function () {
            // In this demo, we are using Direct Line token from MockBot.
            // To talk to your bot, you should use the token exchanged using your Direct Line secret.
            // You should never put the Direct Line secret in the browser or client app.
            // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication

            // Token is found by going to Azure Portal > Your Web App Bot > Channels > Web Chat - Edit > Secret Keys - Show
            // It looks something like this: pD*********xI.8ZbgTHof3GL_nM5***********aggt5qLOBrigZ8
            const token = 'LxTsWrNC****bPm5awq3DW7hfb*************I2s0nb19f76Xdmm8';

            // You can modify the style set by providing a limited set of style options
            const styleOptions = {
                botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
                botAvatarInitials: 'BF',
                userAvatarImage: 'https://avatars1.githubusercontent.com/u/45868722?s=96&v=4',
                userAvatarInitials: 'WC',
                bubbleBackground: 'rgba(0, 0, 255, .1)',
                bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
            };

            // We are using a customized store to add hooks to connect event
            const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
                    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,store,
                webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()

            }, document.getElementById('webchat'));

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));
    </script>
</body>
</html>

预期结果：

我希望我的HTML在所有浏览器中打开，HTML应该包含自动检测浏览器和执行相关脚本的代码，以便聊天机器人在所有浏览器中打开并正常运行，而不需要花费任何额外的时间

实际结果：

目前，聊天机器人不在IE 11中工作，但在所有其他浏览器中工作

日期：2019年6月7日

@特伯恩福德：请根据下面提供的示例查找我修改的HTML脚本：

正如我在评论中试图解释的那样，我没有使用令牌生成器，而是使用下面链接中提供的简易方法，并且除非我得到的put I-FRAME是错误的方式，否则BOT不会加载，根据下面的链接：

下面的文章中也给出了不使用令牌生成器的原因


网络聊天：ES5 polyfills的全功能捆绑包
html，正文{高度：100%}
正文{页边距：0}
#网络帽{
身高：100%；
宽度：100%；
}
（功能（）{
常量标记=“”；
常量样式选项={
botAvatarImage:“您的图像URL”，
Botravatarinitials:'BF'，
userAvatarImage:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
UserAvatariInitials:'WC'，
泡泡背景：“rgba（0,0,255,1）”，
bubbleFromUserBackground:'rgba（0,255,0,1）'
};
var store=window.WebChat.createStore（{}，函数（_ref）{
var调度=_ref.dispatch；
返回函数（下一步）{
返回函数（动作）{
如果（action.type==='DIRECT\u LINE/CONNECT\u completed'）{
派遣({
键入：“网络聊天/发送事件”，
有效载荷：{
名称：'webchat/join'，
值：{language:window.navigator.language}
}
});
}
返回下一步（操作）；
};
};
});
window.WebChat.renderWebChat({
directLine:window.WebChat.createDirectLine({
令牌：令牌，
样式选项：样式选项，
店:店,，
webSpeechPonyfillFactory:window.WebChat.createBrowserWebSpeechPonyfillFactory（）
})}，document.getElementById（'webchat'）；
document.querySelector（“#webchat>*”）.focus（）；
});

您能否验证我是否在上述脚本中做了任何错误，因为根据我的理解/知识，我已经厌倦了将所有需要的正确值放在任何地方

你能帮我解决机器人在IE-11中不能打开的问题吗？如果可能的话，我们可以通过Skype连接共享屏幕，并在双方同意的时间内根据需要进行讨论

谢谢和问候

-ChaitanyaNG

您不能在IE 11中使用异步/等待协议。还要确保您正在使用es5捆绑包。看看这个网络聊天示例

<!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">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <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>
      const token = '<WEB_CHAT_SECRET>';

      const styleOptions = {
            botAvatarImage: 'Ur Image URL',
            botAvatarInitials: 'BF',
            userAvatarImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
            userAvatarInitials: 'WC',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
        };

      const store = window.WebChat.createStore(
        {}, 
        function (_ref) {
          const dispatch = _ref.dispatch;
            return function (next) {
              return function (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: token}),
          styleOptions: styleOptions,
          store: store,
          webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
        }, document.getElementById('webchat'));           
        document.querySelector('#webchat > *').focus();
    </script>
  </body>
</html>


网络聊天：ES5 polyfills的全功能捆绑包
html，正文{高度：100%}
正文{页边距：0}
#网络帽{
身高：100%；
宽度：100%；
}
常量标记=“”；
常量样式选项={
botAvatarImage:“您的图像URL”，
Botravatarinitials:'BF'，
userAvatarImage:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
UserAvatariInitials:'WC'，
泡泡背景：“rgba（0,0,255,1）”，
bubbleFromUserBackground:'rgba（0,255,0,1）'
};
const store=window.WebChat.createStore(
{}, 
函数（_ref）{
const dispatch=_ref.dispatch；
返回函数（下一步）{
返回函数（动作）{
如果（action.type==='DIRECT\u LINE/CONNECT\u completed'）{
派遣({
键入：“网络聊天/发送事件”，
有效载荷：{
名称：'webchat/join'，
值：{language:window.navigator.language}
}
});
}
返回下一步（操作）；
};
};
});
window.WebChat.renderWebChat({
directLine:window.WebChat.createDirectLine（{token:token}），
样式选项：样式选项，
店:店,，
webSpeechPonyfillFactory:window.WebChat.createBrowserWebSpeechPonyfillFactory（）
}，document.getElementById（'webchat'）；
document.querySelector（“#webchat>*”）.focus（）；

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>

const store = window.WebChat.createStore({}, ({
      dispatch
    }) => next => action => {
      if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
        dispatch({
          type: 'WEB_CHAT/SEND_EVENT',
          payload: {
            name: 'webchat/join',
            value: {
              language: window.navigator.language
            }
          }
        });
      }

<!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">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <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>
        (function (){
         const token = '<<Secret Code>>';

         const styleOptions = {
                botAvatarImage: 'Ur Image URL',
                botAvatarInitials: 'BF',
                userAvatarImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
                userAvatarInitials: 'WC',
                bubbleBackground: 'rgba(0, 0, 255, .1)',
                bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
            };

        var store = window.WebChat.createStore({}, function (_ref) {
                    var dispatch = _ref.dispatch;
                     return function (next) {
          return function (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: token,
         styleOptions: styleOptions,
         store: store,
             webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
        })}, document.getElementById('webchat'));           
          document.querySelector('#webchat > *').focus();
    });
    </script>
  </body>
</html>

<!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">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <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>
      const token = '<WEB_CHAT_SECRET>';

      const styleOptions = {
            botAvatarImage: 'Ur Image URL',
            botAvatarInitials: 'BF',
            userAvatarImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFpBTkKBW7JgYuePzhVoGkDDdZLVKQMZDbgy6j3C0sWvkkH1-',
            userAvatarInitials: 'WC',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
        };

      const store = window.WebChat.createStore(
        {}, 
        function (_ref) {
          const dispatch = _ref.dispatch;
            return function (next) {
              return function (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: token}),
          styleOptions: styleOptions,
          store: store,
          webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
        }, document.getElementById('webchat'));           
        document.querySelector('#webchat > *').focus();
    </script>
  </body>
</html>