将 html 载入 div 并包含 javascript

Question

我有一个站点可以将 html（来自数据库）加载到 div。使用 Backbone 作为框架，使用 Handlebars 作为模板工具。

在这个 html 中，我还有一些 javascript 也很完美。

但是，当我尝试同时包含 plotly cdn 甚至整个 javascript 时，它不会识别 Plotly。导致错误：

"Plotly not defined"

我尝试使用 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>

当 plotly 加载时它不起作用:

<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/

因此！：我无法使用 backbone 和车把来真正重现这种情况。看起来 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>

将 html 载入 div 并包含 javascript

load html into div with javascript included

javascript

jquery

backbone.js

handlebars.js

plotly