title: Loading an iFrame widget with a single script tag
body: <p>I'm building an a responsive HTML widget which I would like to load with a single <code>&lt;script&gt;</code> tag. This 'loader' script is meant to load two elements into the DOM: a <code>&lt;script&gt;</code> tag and an <code>&lt;iframe&gt;</code> tag. </p>
  
  <p>Here is the contents of the loader script:</p>
  
  <pre><code>var self = document.currentScript;
  
  var script = document.createElement("script");
      script.setAttribute("language", "javascript");
      script.setAttribute("type", "text/javascript");
      script.setAttribute("src", "http://cdn.domain.com/script.js");
  
  var iframe = document.createElement("iframe");
      iframe.src = "http://cdn.domain.com/iframe.js";
      iframe.width = "100%";
      iframe.setAttribute("id", "iframe-id");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("onload", "javascript:load(this);")
      iframe.setAttribute("style", "border: 0 none !important; display: block;");
  
  self.insertAdjacentElement( "afterend", script );
  script.insertAdjacentElement( "afterend", iframe );
  </code></pre>
  
  <p>Here is the content <code>http://cdn.domain.com/script.js</code> </p>
  
  <pre><code>function load(obj) { 
      window.onresize = function(event) { 
          obj.style.height = obj.contentWindow.document.getElementById(obj).offsetHeight + 'px';
      } 
      var handler = window.onresize; 
      handler.apply(window);
  }
  </code></pre>
  
  <p>However, I get the following error in the console :</p>
  
  <pre><code>script.js:3 - Uncaught SecurityError: Blocked a frame with origin "http://origin.domain.com" from accessing a frame with origin "http://cdn.domain.com". Protocols, domains, and ports must match.
  </code></pre>
  
  <p>Also the <code>load()</code> function, which is meant to automatically get the height of the iframe when the window is resized, doesn't seem to be called. Everything worked when the script and iframe was statically loaded in the page. </p>