如何将数据传递到异步加载的外部JavaScript脚本

Question

我按照这个答案https://stackoverflow.com/a/7719185/842837异步加载javascript。 我如何将数据传递到此外部文件？

当前代码：

<script id="js-widget-o2ba1y" type='text/javascript'>
    (function() {
        function async_load(){
            var config = {
                'module': 'hyperdesign',
                'user-name': 'John Doe',
                'user-email': 'john@doe.com'
            };
            var id = "js-widget-o2ba1y";
            var embedder = document.getElementById(id);
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            var u = 'http://external.javascript.file.js';
            s.src = u + ( u.indexOf("?") >= 0 ? "&" : "?") + 'ref=' + encodeURIComponent(window.location.href);
            embedder.parentNode.insertBefore(s, embedder);
        }

        if (window.attachEvent)
            window.attachEvent('onload', async_load);
        else
            window.addEventListener('load', async_load, false);
    })();
</script>

如何将config发送到外部js文件？

编辑我正在通过谷歌分析代码。 他们还异步加载脚本，并使用来自第三方网站的配置数据：

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

我需要以更易读的方式做同样的事情。

Answer 1

不，您不能传递这样的参数并使脚本读取它们。

从技术上讲，您可以从标签中获取它们，但这确实是一团糟。

可以在包含文件之前输出一个脚本块吗？

<script type="text/javascript"> 
            var config = {
                'module': 'hyperdesign',
                'user-name': 'John Doe',
                'user-email': 'john@doe.com'
            };

 </script>
 <script id="js-widget-o2ba1y" type='text/javascript'>
     //you code
  </script>

这样， config对象将附加到window名称空间=> window['config'] ;

因此，作为替代，您可以保留与原来相同的代码，但是，只需将window.config= var config=替换为var config= window.config= ； 这样，外部js的config将可见。

<script id="js-widget-o2ba1y" type='text/javascript'>
    (function() {
        function async_load(){
            window.config = {
                'module': 'hyperdesign',
                'user-name': 'John Doe',
                'user-email': 'john@doe.com'
            };
            var id = "js-widget-o2ba1y";
           //-----rest of code
</script>