延迟加载javascript文件答案

【问题标题】：Lazy load javascript file延迟加载javascript文件
【发布时间】：2018-03-01 13:09:09
【问题描述】：

我正在尝试在我们的网站上实现 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

【问题讨论】：

您可以添加您尝试执行此延迟加载的页面的代码吗？
为清晰起见编辑标题
编辑后的标题遗漏了问题的关键点，即关于 MS botframework 的工作以及是否可以在没有页面源的情况下启动它。
嗨@PeterGibb，有什么更新吗？回复是否帮助您解决问题？
感谢@FeiHan，这很有帮助。我发现的具体问题是与 requireJS 的冲突，通过将初始化 into requireJS 而不是尝试解决它解决了这个问题。我将按照您的建议通过 JS 动态实现 CSS。

标签： javascript botframework

【解决方案1】：

您可以参考以下示例代码在您的网页中动态添加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"))
});

测试结果：

【讨论】：

在调用botchat.js文件的lazyload后初始化BotChat超时，将其封装在if (typeof BotChat !== "undefined")调用中会很有帮助，避免出现“BotChat未定义”错误如果延迟加载时间超过您的超时时间。也可以将该部分放在它自己的函数中，这样如果 BotChat 仍然未定义，您可以在 if 语句中添加一个 else 部分，我建议在必要时调用另一个 setTimeout。对于您在示例中设置的 3000 毫秒，这应该很少成为问题。