加载

Question

添加动态加载的脚本时，我可以在执行期间访问主对象，但是一旦加载了页面，如果我尝试从控制台访问它，它会抛出undefined。例如，

 var js, fjs = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
 js.onload = ()=> { /* do something when script loads */}
 fjs.parentNode.insertBefore(js, fjs);

理想情况下，这应该将FB对象附加到窗口，并在执行页面时执行此操作。我可以在执行上述JS时访问window.FB，但是一旦页面加载（我知道js.onload也被执行），我就无法访问FB.someOperation。

确保动态添加的脚本始终可用（甚至在页面加载后）的解决方案是什么

Answer 1

请记住double check the property names。

onLoad应为onload（全部小写）。

var d = document;
var id = 'hello';
var js, fjs = d.getElementsByTagName('script')[0];
js = d.createElement('script');
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";

js.onload = () => {
//   ^--------------------------- note the lowercase 'l'
  console.log('hello world');
};

fjs.parentNode.insertBefore(js, fjs);

<script></script>

Answer 2

我建议您使用jQuery.getScript()作为dynamic，如上所述。

例如：

var func = function () {
    console.log('do this without the script');

    console.log('geting script...');

    $.getScript( "//connect.facebook.net/en_US/all.js", function( data, textStatus, jqxhr ) {
          console.log('script is loaded...');

          console.log( data ); // Data returned
          console.log( textStatus ); // Success
          console.log( jqxhr.status ); // 200
          console.log( "Load was performed." );
    });
};

func();