title: Load External Cross Domain HTML Content in iFrame vs. from Asynchronously JavaScript?
body: <p>I have an HTML widget, i.e., HTML Content that can be included in other pages. So lets say my content is from domain A and a page in domain B includes the widget from domain A. I see two ways to include the cross domain content in a page of domain B. </p>
  
  <p>Note: The widget will show some diagrams, i.e., data visualisation.</p>
  
  <p><strong>Variante 1:</strong> </p>
  
  <p>Using an iFrame. </p>
  
  <pre><code>&lt;iframe src="domain_A_url_to_widget" width="200" height="400" name="foreignWidget"&gt;
    &lt;p&gt;no Browser support&lt;/p&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p><strong>Variante 2:</strong> </p>
  
  <p>Using asynchronously JavaScript.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    (function(d){
      var f = d.getElementsByTagName('SCRIPT')[0],
          p = d.createElement('SCRIPT');
      p.type = 'text/javascript';
      p.async = true;
      p.src = '//domainA.com/js/widget.js';
      f.parentNode.insertBefore(p, f);
    })(document);
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>1. What are the advantages and disadvantages of both variants?</strong></p>
  
  <p><strong>2. Is there any possibility to use JQuery and CSS in variant 2?</strong></p>
  
  <p><strong>3. Can the user interact with my widget in both variants event if the widget loads content with ajax?</strong></p>