title: Replace logo when export is embedded into another website using jquery
body: <p>I am working on a charting application. Once the chart is exported and embedded somewhere else via iframe I want a different logo to appear. I am using <a href="http://twig.sensiolabs.org/" rel="nofollow">twig</a> to create templates. Here is my code below</p>
  
  <pre><code>{# block('chart_footer_logo') #}
  
  &lt;div class="chart-footer"&gt;
      {% if not plain %}
      &lt;div class="footer-right"&gt;
          &lt;a class="logo" href="mywebsite" target="_blank"&gt;
              &lt;img class = "internal" src="{{ ASSET_PATH }}logo.png" height="18" /&gt;
              &lt;img class = "external" src="{{ ASSET_PATH }}logo-external.jpg" height="18" /&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  {% endif %}
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  (function() {
  try {
      function endswith(str, ends){
        if (ends === '') return true;
        if (str == null || ends == null) return false;
        str = String(str); ends = String(ends);
        return str.length &gt;= ends.length &amp;&amp; str.slice(str.length - ends.length) === ends;
      }
      var referrer = document.referrer.split('/')[2];
      if (endswith(referrer, "mywebsite.com")) {
          $(".logo.external").hide();
      } else if (endswith(referrer, "externalwebsite.com")){
          $(".logo.internal").hide();
      }
  } catch () {}
  })();
  </code></pre>
  
  <p>I do not understand why this wont give any results and no errors in the console either. </p>