Question

我正在创建一个窗口小部件，显示可以切换的几个第三方窗口小部件，但是，我不希望窗口小部件在页面加载时加载所有窗口小部件以保存请求。我只想在用户从菜单中选择一个小部件时加载其他小部件。

有没有办法动态加载这些脚本，而无需在iframe中存放内容？

一个例子是推特小部件：

<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

页面加载后添加和执行脚本

1 个答案: