將HTML載入包含javascript的div中

Question

我有一個網站將html（來自數據庫）加載到div中。 使用Backbone作為框架，使用Handlebars作為模板工具。

在此html中，我還有一些javascript也可以完美地運行。

但是，當我嘗試也包括plotly cdn甚至整個javascript時，它將無法識別Plotly。 導致錯誤：

“未完全定義”

我試圖使用jQuery解決這種加載Plotly的問題，甚至將完整的縮小的Plotly代碼放入HTML中，但是沒有結果。

這是html / javascript代碼，當加載到div中時可以正常工作：

<div class='ldbp_img' style='overflow: auto; height:100%; width: 100%;'></div>                              
<script type='application/javascript' language='JavaScript'>

if (!Date.now) {
    Date.now = function() { return new Date().getTime(); }
}
var img = new Image(),
    imageUrl = "http://new.image.nu/1234.png',
    interval = 30000;

$(img).attr('width', '100%');
$(img).attr('height', '100%');

var setImg = function () {

    //var img = new Image();
    var time = Math.floor(Date.now() / 1000);
    img.src = imageUrl + time;

    $('.ldbp_img').html(img);

};
img.src = imageUrl';
$('.ldbp_img').html(img);

if (window.countInt) {
    clearInterval(window.countInt);
    window.countInt = null;
}

window.countInt = setInterval(setImg, interval);
</script>

加載時不起作用：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>

<script>

    // Some data omitted for clarity on screen!
    var data = [{
        name: "Asia",
        text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
        marker: {
            sizemode: "area",
            sizeref: 200000,
            size: [31889923, 708573, 150448339, 22211743]
        },
        mode: "markers",
        y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
        x: [43.828, 75.635, 64.062, 62.698],
        uid: "99da6d"
    }, {
        name: "Europe",
        text: ["Albania", "Austria", "Belgium", "United Kingdom"],
        marker: {
            sizemode: "area",
            sizeref: 200000,
            size: [3600523, 8199783, 10392226, 60776238]
        },
        mode: "markers",
        y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
        x: [76.423, 79.829, 79.441, 79.425],
        uid: "9d3ba4"
    }, {
        name: "Oceania",
        text: ["Australia", "New Zealand"],
        marker: {
            sizemode: "area",
            sizeref: 200000,
            size: [20434176, 4115771]
        },
        mode: "markers",
        y: [34435.36744, 25185.00911],
        x: [81.235, 80.204],
        uid: "f9fb74"
    }];

    var layout = {
        xaxis: {
            title: 'Life Expectancy'
        },
        yaxis: {
            title: 'GDP per Capita',
            type: 'log'
        },
        margin: {
            t: 20
        },
        hovermode: 'closest'
    };


    Plotly.plot('my-graph', data, layout);


</script>

我也使用jQuery嘗試了一下，但沒有結果：

<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>

<script>
    $.ajax({
        url: "https://cdn.plot.ly/plotly-latest.min.js",
        dataType: "script",
        cache: true,
        success: function () {
            runNow();
        }
    });

    // Some data omitted for clarity on screen!
    var data = [{
        name: "Asia",
        text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
        marker: {
            sizemode: "area",
            sizeref: 200000,
            size: [31889923, 708573, 150448339, 22211743]
        },
        mode: "markers",
        y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
        x: [43.828, 75.635, 64.062, 62.698],
        uid: "99da6d"
    }, {
        name: "Europe",
        text: ["Albania", "Austria", "Belgium", "United Kingdom"],
        marker: {
            sizemode: "area",
            sizeref: 200000,
            size: [3600523, 8199783, 10392226, 60776238]
        },
        mode: "markers",
        y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
        x: [76.423, 79.829, 79.441, 79.425],
        uid: "9d3ba4"
    }, {
        name: "Oceania",
        text: ["Australia", "New Zealand"],
        marker: {
            sizemode: "area",
            sizeref: 200000,
            size: [20434176, 4115771]
        },
        mode: "markers",
        y: [34435.36744, 25185.00911],
        x: [81.235, 80.204],
        uid: "f9fb74"
    }];

    var layout = {
        xaxis: {
            title: 'Life Expectancy'
        },
        yaxis: {
            title: 'GDP per Capita',
            type: 'log'
        },
        margin: {
            t: 20
        },
        hovermode: 'closest'
    };

    var runNow = function () {
        Plotly.plot('my-graph', data, layout);
    };

</script>

這確實在jsfiddle中起作用，唯一的區別是我沒有將html異步加載到DOM中。

工作小提琴： https ： //jsfiddle.net/b2js15nm/ https://jsfiddle.net/b2js15nm/1/

因此！：我無法使用主干和把手真正地重新創建情況。 稍后在頁面上加載時，看來Plotly的AMD無法正常工作。 因此，Plotly將是不確定的。

Answer 1

如果要在頁面中動態添加script ，請嘗試創建script元素並偵聽load事件，然后初始化邏輯，例如：

var script = document.createElement('script');
script.setAttribute('src', 'https://cdn.plot.ly/plotly-latest.min.js');
document.body.appendChild(script);

script.addEventListener('load', function () {
    // Plotly loaded
    console.log(Plotly);
})

Answer 2

當我以為AMD模塊是問題時，我嘗試使用require加載腳本。 我已經在使用require了，所以我不需要做太多的事情來實現它。

這是頁面現在的樣子：

<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>

<script>

    require(['https://cdn.plot.ly/plotly-latest.min.js'], function (Plotly) {

        // Some data omitted for clarity on screen!
        var data = [{
            name: "Asia",
            text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
            marker: {
                sizemode: "area",
                sizeref: 200000,
                size: [31889923, 708573, 150448339, 22211743]
            },
            mode: "markers",
            y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
            x: [43.828, 75.635, 64.062, 62.698],
            uid: "99da6d"
        }, {
            name: "Europe",
            text: ["Albania", "Austria", "Belgium", "United Kingdom"],
            marker: {
                sizemode: "area",
                sizeref: 200000,
                size: [3600523, 8199783, 10392226, 60776238]
            },
            mode: "markers",
            y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
            x: [76.423, 79.829, 79.441, 79.425],
            uid: "9d3ba4"
        }, {
            name: "Oceania",
            text: ["Australia", "New Zealand"],
            marker: {
                sizemode: "area",
                sizeref: 200000,
                size: [20434176, 4115771]
            },
            mode: "markers",
            y: [34435.36744, 25185.00911],
            x: [81.235, 80.204],
            uid: "f9fb74"
        }];

        var layout = {
            xaxis: {
                title: 'Life Expectancy'
            },
            yaxis: {
                title: 'GDP per Capita',
                type: 'log'
            },
            margin: {
                t: 20
            },
            hovermode: 'closest'
        };


        Plotly.plot('my-graph', data, layout);

    });

</script>