我面临的问题是我已经使用C＃和Bot框架V4开发了一个具有多个瀑布对话框的Web聊天机器人，并使用Visual Studio 2019成功部署了Azure，并且没有任何错误，并且HTML文件可以访问Web通道聊天机器人。在除IE 11之外的所有浏览器中都可以打开此HTML URL，即，该URL在以下浏览器中可以正常运行：
Chrome
边缘
Firefox
但是当谈到IE 11时，它会引发错误，并且聊天机器人永远不会打开。有时会出现错误，例如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文件适用于IE 11，还希望如何检测浏览器和相关脚本会自动启动以使其自动运行。
由于我是编码，BOT，HTML，CSS和JavaScript的新手，因此请您以详细的指导方式逐步提供所需的修改。
我做了一些谷歌搜索，然后他们说要删除异步功能供IE使用。
我也替换了下面的行：
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
具有以下内容：
<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
}
}
});
}
预期结果：
我希望我的HTML在所有浏览器中打开，并且HTML应该包含用于自动检测浏览器并执行相关脚本的代码，这样聊天机器人就可以在所有浏览器中打开并正常运行，而无需花费任何额外时间。
实际结果：
当前，聊天机器人无法在IE 11中运行，但可以在所有其他浏览器中运行。
日期：2019年6月7日
@tdurnford： 请根据下面提供的示例找到我修改后的HTML脚本：
正如我试图在我的评论中解释的那样，我没有使用令牌生成器，而是在下面的链接中提供了简单的方法，并且直到加载了I-FRAME为止，除非加载了错误的方法，否则BOT不会加载下面的链接：
不使用令牌生成器的原因也在下面的帖子中给出。
<!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>
您能否验证我在上述脚本中是否做错了什么，因为我已经厌倦了根据我的理解/知识将所需的所有正确值放在任何地方？
能否请您帮我解决BOT无法在IE-11中打开的问题？如果可能，我们可以让Skype连接到共享屏幕，并根据需要在双方同意的基础上根据需要进行讨论。
感谢与问候 -ChaitanyaNG
答案 0 :(得分：1)
您不能在IE 11中使用异步/等待协议。另外，请确保您使用的是es5捆绑包。看看这个Getting Started wit es5 Bundle网络聊天示例。
<!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>
希望这会有所帮助！