动态加载的脚本在加载后未定义

Question

当添加动态加载的脚本时，我可以在执行期间访问主对象，但是一旦加载页面，如果我试图从控制台访问主对象，则它会引发未定义。例如，

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();