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.

You want to append a <script> tag, not a <style> tag. Maybe that was just a typo, though. — Eric N
– Eric N, Commented May 27, 2016 at 19:31
Sorry, that was a typo. I was actually fixing it when I saw your comment pop up. ^^' — Christopher Esbrandt
– Christopher Esbrandt, Commented May 27, 2016 at 19:34

Eric N · Accepted Answer · 2016-05-27 20:13:57Z

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, 2016 at 20:13

answered May 27, 2016 at 20:01

Eric N

2,22616 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christopher Esbrandt Over a year ago

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?

ahwayakchih Over a year ago

Best would be to let them know about the problem with the script, while temporary modifying it.

ahwayakchih · Accepted Answer · 2016-05-27 20:42:58Z

0

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

edited May 27, 2016 at 20:42

answered May 27, 2016 at 20:30

ahwayakchih

2,39122 silver badges25 bronze badges

Collectives™ on Stack Overflow

Dynamically Load JS Dynamically Loads More JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related