提供嵌入脚本的最佳方式

Best way to provide embedding script?

本文关键字:最佳 方式 脚本      更新时间:2023-09-26

我提供了可嵌入的内容,并通过脚本标记分发。当用户在页面的HTML中包含脚本标记时,它会在执行时将相关内容注入DOM。它们可能在同一页面中包含多个这样的嵌入脚本。

嵌入脚本有许多依赖项(jQuery、Google jsapi、Google Fusion表)。如果嵌入脚本的前一个实例或编写页面其余部分的人还没有加载这些脚本,我希望能够加载它们。

主要有趣的部分:

  1. 我的嵌入脚本可能在一个人的页面中存在多次
  2. 我有外部依赖关系
  3. 我希望能够用我的脚本绑定到事件(google.maps.event.addDomListener),所以我需要等待这些脚本加载
  4. 我想避免干扰嵌入程序的页面

有没有一个共同的模式来实现这一点?

由于我使用的是Google JS Loader,并且依赖项与它兼容,所以我正在利用它。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function things_loaded() {
    if(window.THING_MAPS) {
        for (var mapI = 0; mapI < window.THING_MAPS.length; mapI++) {
            window.THING_MAPS[mapI]();
        }
        window.THING_MAPS = [];
    }
}
if (!window.THING_MAPS_LOADED) {
    google.load("jquery", "1.7.0");
    google.load("maps", "3", {other_params:'sensor=false', callback: things_loaded});
    window.THING_MAPS_LOADED = true;
}
</script>