javascript - JS加载外部脚本并本地配置

Question

假设有人想将以下内容插入他们的网站:

<script type="text/javascript" src="https://foo.com/plugin.js"></script>
<script type="text/javascript">

    Plugin.Setup({userId: 100});

</script>

在这种情况下，plugin.js 创建一个具有“Setup”方法的“Plugin”对象。

问题是会抛出以下错误:

Uncaught ReferenceError: Plugin is not defined

这是可以理解的，因为您无法调用 undefined object 的方法。

此方法可以解决问题:

<script type="text/javascript" src="https://foo.com/plugin.js"></script>
<script type="text/javascript">
    function initiatePlugin() {
        Plugin.Setup({userId: 100});
    }

    window.addEventListener ? window.addEventListener('load', initiatePlugin) : window.attachEvent && window.attachEvent('onload', initiatePlugin);
</script>

但是，我看到其他插件可以摆脱这种事情。例如 TypeKit 有以下嵌入代码:

<script src="https://use.typekit.net/sgye3663.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

他们所依赖的是外部脚本 https://use.typekit.net/sgye3663.js 加载速度比调用“Typekit.load”的本地脚本更快，在这种情况下如果抛出错误，Typekit 将永远不会加载。

这是进行插件设计的正确方法吗？或者等待窗口加载事件会更好吗？

Answer 1

最好等到页面完全加载，然后执行外部对象的方法