Dynamically Load JS Dynamically Loads More JS

Question

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 GETs 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.

Sorry, that was a typo. I was actually fixing it when I saw your comment pop up. ^^' — Christopher Esbrandt, May 27 '16 at 19:34

Eric N · Answer 1 · 2016-05-27T20:13:57.317

1

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;

edited May 27 '16 at 20:13

answered May 27 '16 at 20:01

Eric N

2,136
13
13

Okay, so it's not an issue with my code, but you Amara, meaning I can't work around it with a generic loading. Instead, I would have to pull their script, modify it, then load it. Sound about right? – Christopher Esbrandt May 28 '16 at 00:01
Best would be to let them know about the problem with the script, while temporary modifying it. – ahwayakchih May 28 '16 at 14:20

ahwayakchih · Answer 2 · 2016-05-27T20:42:58.917

~~It looks like jQuery adds script tag and then removes it ASAP. When you add script with "vanilla" JS, script stays there.~~ jQuery appends 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.

Dynamically Load JS Dynamically Loads More JS

2 Answers2