延迟加载javascript文件 [英] Lazy load javascript file
问题描述
我正在尝试在我们的网站上实现一个Microsoft botframework聊天机器人，但不想用470Kb库为那些不会与该机器人互动的用户加重负担，除非他们选择开始聊天.
当页面源中包含框架时，机器人会初始化并启动，但是当我从页面源中删除该框架，而是在用户单击启动机器人的按钮时将其写入页面时，脚本将被写入该页面，并且可以在DevTools源代码中看到，但未初始化.
我尝试了几种方法来延迟初始化，直到脚本下载完成为止，但是无论脚本是在本地托管还是从MS CDN
I'm trying to implement a Microsoft botframework chatbot on our site but don't want to burden the users who won't engage with the bot with the 470Kb library unless they choose to start a chat.
When the framework is included in the page source, the bot initialises and launches but when I remove this from the page source and instead write it to the page when the user clicks a button to start the bot, the script is written to the page and can be seen in DevTools sources but does not initialise.
I've tried several methods of delaying the initialisation until after the script has downloaded, but none of these have worked whether the script is hosted locally or from the MS CDN https://cdn.botframework.com/botframework-webchat/latest/botchat.js.
Even manually checking for the BotChat object in console returns BotChat is not defined.
Is it possible to lazy load the framework after page load?
http://demo.icaew.com/peter-gibb/global-front-end/html/corporate/berzerk.html
You can refer to the following sample code to dynamically add botchat.css and botchat.js files in your webpage, and dynamically initiate 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>
Besides, to load a JavaScript file, you can also use jQuery.getScript() menthod, and then you can initiate botchat in success callback function.
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"))
});
Test result:
这篇关于延迟加载javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
