动态加载js

通常，加载哪些js文件都是在开发阶段，预先写好在页面上。但某些场景下需要动态加载js脚本。

像以下这个例子，由于地图页面是个公用的页面，所以应该尽量保持干净和轻量。但好多地方都使用了该地图，我又希望它可以因应不同的情况，按需动态加载不同的脚本，以适应不同的要求。

示例如下：

<div class="main">
    <div class="normal-box map">
    	<!--/* 二维地图页面，存放在一个iframe里 */-->
        <iframe id="frame2D" class="frame" src="about:blank"></iframe>
        <!--/* 三维地图，存放在另一个iframe里 */-->
        <iframe id="frame3D" class="frame hidden" src="about:blank"></iframe>
    </div>
</div>
....
<!--/*
    地图页面加载气泡相关js
    之所以动态加载，是因为气泡相关js不是地图必须依赖，只跟具体业务有关
*/-->
<script th:inline="javascript">
    var timer_map2d = setInterval(function () {
        let doc = document.getElementById("frame2D").contentDocument;
        if(!doc || doc == null) return;//地图页面尚未加载完毕
        clearInterval(timer_map2d);

        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.src = /*[[@{/js/onemap/bubble.js}]]*/"/js/onemap/bubble.js";
        doc.getElementsByTagName("head")[0].appendChild(script);//让地图页面动态加载某js
    }, 1000);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25