CODEWITHSUNDEEP
javascriptjquerydynamic-loadingjquery-append
Christopher Esbrandt
Christopher Esbrandt

Reputation: 1198

Dynamically Load JS Dynamically Loads More JS

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.

Upvotes: 0

Views: 301

Answers (2)

ahwayakchih
ahwayakchih

Reputation: 2381

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.

Upvotes: 0

Eric N
Eric N

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

Related Questions