延迟加载javascript文件

Question

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.我正在尝试在我们的网站上实施 Microsoft botframework 聊天机器人，但不想给不会使用 470Kb 库的机器人带来负担，除非他们选择开始聊天。

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.当框架包含在页面源中时，机器人会初始化并启动，但是当我从页面源中删除它并在用户单击按钮启动机器人时将其写入页面时，脚本将写入页面并可以在 DevTools 源代码中看到，但不会初始化。

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 .我已经尝试了几种将初始化延迟到脚本下载之后的方法，但是无论脚本是本地托管还是来自 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.即使在控制台中手动检查 BotChat 对象也会返回 BotChat 未定义。

Is it possible to lazy load the framework after page load?页面加载后是否可以延迟加载框架？

http://demo.icaew.com/peter-gibb/global-front-end/html/corporate/berzerk.html http://demo.icaew.com/peter-gibb/global-front-end/html/corporate/berzerk.html

Answer 1

You can refer to the following sample code to dynamically add botchat.css and botchat.js files in your webpage, and dynamically initiate botchat.您可以参考以下示例代码在您的网页中动态添加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>

Besides, to load a JavaScript file, you can also use jQuery.getScript() menthod, and then you can initiate botchat in success callback function.另外，加载一个JavaScript文件，也可以使用jQuery.getScript()方法，然后在success回调函数中启动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"))
});

Test result:测试结果：

延迟加载javascript文件

问题描述

1 个解决方案

解决方案1
4 2018-03-02 05:35:15

延迟加载javascript文件

问题描述

1 个解决方案

解决方案1 4 2018-03-02 05:35:15

解决方案1
4 2018-03-02 05:35:15