延遲加載javascript文件

Question

我正在嘗試在我們的網站上實施 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

Answer 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()方法，然后在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"))
});

測試結果：

延遲加載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