title: Inject External JS into iFrame
body: <p>I'm making a basic editing system.  For this I have an iFrame on the page, and I am wanting to inject javascript into it.  I've tried a few different methods and have come to a method which works (injecting inline script), ideally I don't want to do it this way, I want to inject an external script file.  The current code I have is:</p>
  
  <pre><code>function addScript(src, myscript2) {
      var iFrameHead = window.frames["main_iframe"].document.getElementsByTagName("head")[0];        
      var myscript = document.createElement('script');
      myscript.type = 'text/javascript';
      myscript.src = src;
      iFrameHead.appendChild(myscript);
      iFrameHead.innerHTML = iFrameHead.innerHTML + myscript2;
  }
  addScript("js/jquery-3.1.1.js", "&lt;scr" + "ipt&gt;function frame_hover(e) {e.preventDefault();console.log('hover enter ', $(e.target));}function frame_drop(e) {e.preventDefault();console.log('drop ', $(e.target));}console.log('iframe loaded and script loaded');&lt;/scr" + "ipt&gt;");
  </code></pre>
  
  <p>This is working, the jQuery file is working, as is the inline script that's injected.</p>
  
  <p>I want it to work like this:</p>
  
  <pre><code>tion injectJS() {
  function addScript(src) {
      var iFrameHead = window.frames["main_iframe"].document.getElementsByTagName("head")[0];        
      var myscript = document.createElement('script');
      myscript.type = 'text/javascript';
      myscript.src = src;
      iFrameHead.appendChild(myscript);
  }
  addScript("js/jquery-3.1.1.js");
  addScript("js/frame_script.js");
  </code></pre>
  
  <p>}</p>
  
  <p>Although when doing it this way, I get the error: <code>Uncaught ReferenceError: frame_hover is not defined at HTMLBodyElement.ondragenter</code></p>
  
  <p>frame_hover is called from:</p>
  
  <pre><code>$('#main_iframe').contents().find('body')
                              .attr('ondragenter', 'frame_hover(event)');
  </code></pre>
  
  <p>the content of frame_script.js is: </p>
  
  <pre><code>function frame_hover(e) {
      e.preventDefault();
      console.log('hover enter ', $(e.target));
  }
  function frame_drop(e) {
      e.preventDefault();
      console.log('drop ', $(e.target));
  }
  console.log('iframe loaded and script loaded');
  </code></pre>
  
  <p>What really doesn't make sense to me with this, is that jQuery works injecting it this way, that's loaded exactly the same way as the external file <code>frame_script.js</code> is loaded, why is it not seeing the file?!</p>