请在说“使用$.getScript(fileURL)
或$('body').append($('<script>', {type" 'text/javascript', src: fileURL}))
”之前先阅读一下情况。
我正在尝试使用Amara Embedder链接到视频。通常情况下,我不会同时使用jQuery来完成如此简单的任务,但是我没有选择的余地。
因此,我首先尝试了最简单的选择:
$(function() {
$.getScript('https://amara.org/embedder-iframe');
});
<div class="amara-embed" data-height="480px" data-width="854px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
这将失败,并且控制台条目类似于:
GET https://domain.com/embedder-widget-iframe/?data=%7B%22hei…22url%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5CKwCfLUwj4%22%7D 404 (Not Found)
从示例中应该可以明显看出,这并不是很好。问题是,脚本不是使用脚本,而是使用
amara.org
域作为其基本URL,而是使用执行$.getScript()
的域来执行。使用JavaScript,只需创建一个
SCRIPT
元素并将其附加到BODY
即可正常工作。window.onload = (function() {
var link = document.createElement('script');
link.type = 'text/javascript';
link.src = 'https://amara.org/embedder-iframe';
document.getElementsByTagName('body')[0].appendChild(link);
})();
<div class="amara-embed" data-height="480px" data-width="854px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>
之所以成功,是因为它执行了
GET
域中的amara.org
:https://amara.org/embedder-widget-iframe/?data=%7B%22height%22%3A%22480px%22%2C%22width%22%3A%22854px%22%2C%22url%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5CKwCfLUwj4%22%7D
现在,我尝试了jQuery的变体,例如
$('body').append($('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'}))
和$('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'}).appendTo('body')
,它们的结果相同。我无法找到将其识别为预期功能的文档,也无法找到解决方法。
最佳答案
404错误来自amara.org脚本,而不是jQuery请求。当它在jQuery函数中运行时,我敢打赌this
的某种上下文分配有误。
编辑:找到了。该代码取决于其URL在脚本标签的source属性中。
// This must be done when the js file is first loaded
var scriptFiles = document.getElementsByTagName("script");
var THIS_JS_FILE = scriptFiles[scriptFiles.length-1].src;