我正在尝试在我们的网站上实现一个Microsoft botframework聊天机器人，但不想用470Kb库给那些不会与该机器人互动的用户带来负担，除非他们选择开始聊天。
当框架包含在页面源代码中时，机器人会初始化并启动，但是当我从页面源代码中删除它，而是当用户单击启动机器人的按钮时将其写入页面时，脚本将被写入页面并可以在DevTools源码中看到，但没有初始化。
我尝试了几种延迟初始化的方法，直到脚本下载完成为止，但是无论脚本是本地托管还是从MS CDN https://cdn.botframework.com/botframework-webchat/latest/botchat.js托管，这些方法都无效。
即使在控制台中手动检查BotChat对象，返回的BotChat也未定义。
页面加载后是否可以延迟加载框架？
http://demo.icaew.com/peter-gibb/global-front-end/html/corporate/berzerk.html
最佳答案
您可以引用以下示例代码，以在网页中动态添加botchat.css和botchat.js文件，并动态启动botchat。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="btninit" type="button" value="startchat" onclick="initiateChat()" />
<br />
<div id="mybot" />
</body>
</html>
<script>
function initiateChat() {
addCSS("https://cdn.botframework.com/botframework-webchat/latest/botchat.css");
addScript("https://cdn.botframework.com/botframework-webchat/latest/botchat.js");
setTimeout(function () {
BotChat.App({
directLine: { secret: 'your_directline_secret' },
user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
bot: { id: 'your_bot_id' },
resize: 'detect'
}, document.getElementById("mybot"))
}, 3000);
}
// add CSS file
function addCSS(filename) {
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('link');
style.href = filename;
style.type = 'text/css';
style.rel = 'stylesheet';
head.appendChild(style);
}
// add script file
function addScript(filename) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.insertBefore(script, document.getElementsByTagName("script")[0]);
}
</script>
此外，要加载JavaScript文件，您还可以使用jQuery.getScript() menthod，然后可以在成功回调函数中启动botchat。
var url = "https://cdn.botframework.com/botframework-webchat/latest/botchat.js";
$.getScript(url, function () {
BotChat.App({
directLine: { secret: 'your_directline_secret' },
user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
bot: { id: 'your_bot_id' },
resize: 'detect'
}, document.getElementById("mybot"))
});
测试结果: