Reputation: 1198
Please, read the situation before saying "Use $.getScript(fileURL)
or $('body').append($('<script>', {type" 'text/javascript', src: fileURL}))
".
I am trying to use the Amara Embedder for linking to videos. Normally, I wouldn't both with jQuery for so simple a task, but I've been given no choice in the matter.
So, I tried the simplest option first:
$(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>
This fails with a console entry similar to:
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)
As should be evident from the example, this doesn't work so well. The issue being that instead of executing the script and using the amara.org
domain as its base URL, the script is executed using the domain of where $.getScript()
had been executed.
Using JavaScript, its a simple matter of creating the SCRIPT
element and appending it to the BODY
for it to work.
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>
This succeeds because it executes the GET
s from the amara.org
domain:
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
Now, I've tried variations in jQuery such as $('body').append($('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'}))
and $('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'}).appendTo('body')
with identical results.
I have been unable to locate documentation identifying this as the intended functionality, nor how it might be worked around.
Upvotes: 0
Views: 301
Reputation: 2381
It looks like jQuery adds
jQuery appends script
tag and then removes it ASAP.
When you add script with "vanilla" JS, script stays there.script
tag to the head
element, while you were appending script
to the end of body
element.
Amara seems to be trying to get its "environment" domain by getting last script tag src
, because it assumes that the last one will be the one with which it was loaded. Which is wrong in this situation, and that is why it gets wrong domain name.
Upvotes: 0
Reputation: 2216
The 404 error is coming from within the amara.org script, not the jQuery request. When its run within the jQuery function, I would bet some sort of context of this
is being incorrectly assigned.
EDIT: Found it. The code is dependent on its url being in the source attribute of a script tag.
// 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;
Upvotes: 1