Question

首先，感谢您阅读我的问题，并尝试帮助我并为我的英语道歉。

我有以下问题...

我正在以动态方式添加js文件和css文件，但有时会出现错误，因为先加载一个静态js文件，然后才将以动态方式添加的这两个文件降下来。

如何解决该问题？在下载两个动态添加的文件之前，请不要加载js文件（mapfunctions.js）

我的api js文件，调用一个函数，其中添加了动态js文件和css文件，如您所见。

这是我的index.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Map Generator</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    // this file add dinamically a js file and a css file
    <script src="./js/api/api.js"></script>
    // this file needs js file added dinamically, and if is not downloaded crash
    <script src="./js/option2/mapfunctions.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:50%; height:50%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) { 
            customMap.addMap("5b4f12233cfb101f4c2d0537", "map");
        });
    </script>
</body>
</html>

有时显示的错误是： Error: ReferenceError: mapboxgl is not defined at Object.createMap

这是我的api.js文件：

let mapboxJsUrl = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js';
let mapboxCssUrl = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css';

(function(window, document) {

    var includeJSFiles = function(url) {
        var apiJs = document.getElementsByTagName("script")[0];
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", url);

        var css = includeCss(mapboxCssUrl);
        if (apiJs !== undefined) {
            head.insertBefore(script, apiJs);
        } else {
            head.insertBefore(script, head.firstChild);
        }
        head.insertBefore(css, script);
    };

    var includeCss = function(url) {
        var css = document.createElement("link");
        css.setAttribute("rel", "stylesheet");
        css.setAttribute("type", "text/css");
        css.setAttribute("href", url);

        return css;
    };

    includeJSFiles(mapboxJsUrl);

}(window, document));

Answer 1

在这种情况下，最安全的选择可能是在load对象上使用window事件。 According to MDN, load仅在加载所有资源和依赖项后才会触发，因此可能更适合您的情况。

我对mapbox不熟悉，但是after a little research我发现您尝试使用的api将在您的mapboxgl中创建一个window context对象。

看到customMap并未在任何地方定义，我改为检查mapboxgl上是否存在window，以验证Mapbox API是否已动态加载到您的示例中。我对您的代码进行了以下调整，以实现动态加载的mapbox脚本：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Map Generator</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    // this file add dinamically a js file and a css file
    <script src="./js/api/api.js"></script>
    // this file needs js file added dinamically, and if is not downloaded crash
    <script src="./js/option2/mapfunctions.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:50%; height:50%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
    /* UPDATE
       Add event listener to window object, and register handler on the load event
    */
    window.addEventListener('load', function(e) {
        customMap.addMap("5b4f12233cfb101f4c2d0537", "map");
    });
    </script>
</body>
</html>

此外，在您的api.js脚本中，您应该进行以下调整以简化此操作：

(function(window, document) {

    var includeJSFiles = function(url) {
        //var apiJs = document.getElementsByTagName("script")[0];
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", url);

        // UPDATE
        // Keep this simple, and insert the script as head's first node
        head.insertBefore(script, head.firstChild);

        var css = includeCss(mapboxCssUrl);
        head.insertBefore(css, script);
    };

    var includeCss = function(url) {
        var css = document.createElement("link");
        css.setAttribute("rel", "stylesheet");
        css.setAttribute("type", "text/css");
        css.setAttribute("href", url);

        return css;
    };

    includeJSFiles(mapboxJsUrl);

}(window, document));

希望这对您有帮助！

在调用需要该文件之一的其他js文件之前，如何动态加载添加的文件

1 个答案: