I'm creating a widget that displays several third party widgets that you can toggle through, however, I don't want the widget to load all the widgets on page load to save requests. I only want to load the other widgets once the user selects one from the menu.
Is there any way to load in these scripts on the fly, without resorting to housing the content in iframes?
an example would be the twitter widget:
<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>
Best solution?