重复 Javascript 注入以进行 YouTube API 调用？

Question

我正在创建一个利用 YouTube API 的网页。我希望能够在每次用户执行某些操作时对 YouTube API 发起 AJAX 样式调用，并使用调用结果更新页内元素。 YouTube 的文档建议使用 Javascript 注入来解决从我的网页对外部域 (gdata.youtube.com) 进行 AJAX 调用时涉及的跨域权限问题。例如：

<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&format=5&callback=showMyVideos">
</script>

放置在 HTML BODY 内的此代码段使用“callback”参数从“GoogleDevelopers”通道发出视频提要请求，从而在调用返回时调用 showMyVideos()。 showMyVideos()（此处未显示且任意命名）使用 DOM 调用来使用调用结果更新命名的 DIV。

我想要执行相同的操作，除了动态而不是像上面所示的静态操作。例如，我见过这样的代码：

var s = document.createElement('script');
    s.type = "text/javascript";
    s.src = "http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&format=5&callback=showMyVideos"
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(s);

我担心的是，如果我使用这种方法，由于我将进行许多 AJAX 调用，我将在网页 DOM 树中积累越来越多动态生成的 Javascript DOM 元素，我担心什么可能对浏览器或其他任何东西造成的后果。

有没有一种方法可以以这种方式进行 Javascript 注入，而不会使 HEAD 元素中的大量 Javascript 元素变得混乱？简洁的代码示例将不胜感激。

——罗施勒

Answer 1

好吧，没那么难，在获取数据后，您可以通过删除脚本元素来清理数据。