在頁面加載後添加並執行腳本

Question

我正在創建一個小部件，顯示可切換的幾個第三方小部件，但是，我不希望小部件在加載頁面時加載所有小部件以保存請求。我只想在用戶從菜單中選擇一個小部件時加載其他小部件。

是否有任何方法可以實時加載這些腳本，而不訴諸將內容容納在iframe中？

一個例子是twitter的小窗口：

<a height="336" class="twitter-timeline" data-dnt="true" href="https://twitter.com/" data-widget-id="mytwitteraccount">Tweets by @</a> 

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

最佳溶液？

Answer 1

你有沒有考慮使用Jquery getScript。什麼是從服務器加載JavaScript文件，腳本是在全局上下文中執行的。

http://api.jquery.com/jquery.getscript/

從jQuery的樣本：

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) { 
    console.log(data); // Data returned 
    console.log(textStatus); // Success 
    console.log(jqxhr.status); // 200 
    console.log("Load was performed."); 
}); 

最近，類似的問題被張貼在requirejs是更適合的情況下，它也有助於任務：

RequireJS Demo