Amara Embed Code via JS override file in New UI?

Jump to solution
themidiman
Community Champion
‎05-26-2016 05:38 PM

Has anyone had success integrating the Amara embed code in their global JavaScript override file in the new UI?

Outside of Canvas you can add their <script> tag as such:

<script type="text/javascript" src='https://amara.org/embedder-iframe'>

</script>

Since there's no self-report for successful inclusion of the script in their code, I'm not sure if it's happening successfully if I use $.getScript or adding a new <script> tag to the DOM by using .appendChild. Any tips would be appreciated.

1 Solution

Jump to solution
cesbrandt
Community Champion
‎05-27-2016 01:35 PM

Updated (5/31/2016): I revised below the jQuery code segment to explain the use of JavaScript within the jQuery instead of pure jQuery.

Linked JavaScript and CSS added via Node.appendChild() is executed immediately.

Here's a simply pure-JavaScript function for dynamically loading JavaScript and CSS files:

function loadFile(fileURL, type) {
  switch(type) {
    case 'js':
      var link = document.createElement('script');
      link.type = 'text/javascript';
      link.src = fileURL;
      document.getElementsByTagName('body')[0].appendChild(link);
      break;
    case 'css':
      var link = document.createElement('style');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = fileURL;
      document.getElementsByTagName('head')[0].appendChild(link);
      break;
  }
}
window.onload = (function() {
  loadFile('https://amara.org/embedder-iframe', 'js');
})();

Note: The URL for the Amara Embedder script file should be ran across HTTPS for security. As of my posting this, it works directly, but is Amara ever disables secure access, a third-party system will need to be used that will convert your secure request into an unsecure one (middleman).

Here's a jQuery extension equivalent:

$.fn.extend({
  loadFile: function(fileURL, type) {
    switch(type) {
      case 'js':
        var link = document.createElement('script');
        link.type = 'text/javascript';
        link.src = fileURL;
        document.getElementsByTagName('body')[0].appendChild(link);
        break;
      case 'css':
        var link = document.createElement('style');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = fileURL;
        document.getElementsByTagName('head')[0].appendChild(link);
        break;
    }
  }
});
$(function() {
  $().loadFile('https://amara.org/embedder-iframe', 'js');
});

Note: Pure JavaScript is used for the Node creation and appending because jQuery will not load and execute the additional JavaScript as expected. I've tested the issue to a fairly decent extent, dropping my crude extension and using only $.getScript(), $.append(), and $.appendTo() with identical results. Regardless of how the SCRIPT element is generated, using jQuery to add it to the page (HEAD or BODY) will result it the script be executed as if it were on the server calling it and never. The Amara script relies upon the ability to pull the information without this happening as it is extracting its own domain information from the link.

Here're the lines in the Amara script that make a pure jQuery solution impossible:

var scriptFiles = document.getElementsByTagName("script");
var THIS_JS_FILE = scriptFiles[scriptFiles.length-1].src;
// ...
var parser = document.createElement('a');
parser.href = THIS_JS_FILE;
// ...
var iframe = document.createElement("IFRAME");
iframe.src = parser.protocol + "//" + parser.host + "/embedder-widget-iframe/";

These lines are spread out a bit through the actual file, but can be tested without the rest for anyone that wishes to confirm my findings.

View solution in original post