How to implement tiff.js live preview on show.html.erb

I would like to implement a live preview for my tiff files. I load them from a WebService, not locally from app directory. Images and PDF's are loaded correctly until now. These are my sources:

http://ift.tt/1NeiHcJ

http://ift.tt/1Yw9b8x

First I tried to check with a self-written method if its a tiff file. But unfortunately as the result I got a ugly empty iframe box and the download starts automatically.

<div class="col-xs-8">
  <% if @document.is_pdf? %>
    <iframe class="document_preview_pdf" src="<%= download_documents_path(:id => @document.id.to_s, :preview => 1) %>"></iframe>
  <% elsif @document.is_tiff? %>
    <iframe class="document_preview_tiff" src="<%= download_documents_path(:id => @document.id.to_s, :preview => 1) %>"></iframe>
  <% else %>
    <%= image_tag(download_documents_path(:id => @document.id.to_s, :preview => 1), class: "document_preview_img", :alt => '') %>
  <% end %>
</div>

The documentation from tiff.js contains this as "Usage" but I dont know where I should use it.

var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', "url/of/a/tiff/image/file.tiff");
xhr.onload = function (e) {
    var tiff = new Tiff({buffer: xhr.response});
    var canvas = tiff.toCanvas();
    document.body.append(canvas);
};
xhr.send();

For now I just added <script src="http://ift.tt/1NeiJl1"></script> at the bottom of the show.html.erb file. Shell I write a <script>...</script> with the customized "Usage" below the externly loaded tiff.min.js? Have you any idea how I could implement this javascript?