title: iFrame javascript affecting parent DOM
body: <p>I am injecting inline javascript into a pre-existing frame. This javascript is not affecting the frame it's in at all, rather than parent DOM containing the frame.</p>
  
  <p>I have a JSFiddle demonstrating my issue: <a href="http://jsfiddle.net/vfspadgt/" rel="nofollow">http://jsfiddle.net/vfspadgt/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0"&gt;
  #document
  &lt;!-- Editor content goes here --&gt;
  &lt;/iframe&gt;
  
  &lt;div class=".dropdown"&gt;
      &lt;p&gt;hi2&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var preview = $("#preview").contents();
  
  var css = "&lt;style type='text/css'&gt;&lt;/style&gt;";
  
  var html = "&lt;p&gt;hi1&lt;/p&gt;";
  preview.find("head").html(css);
  
  var script   = document.createElement("script");
  script.type  = "text/javascript";
  script.text  = "$('p').remove();";
  preview.find("head").append(script);
  
  preview.find("body").html(html);
  </code></pre>
  
  <p><strong>Results</strong></p>
  
  <p><strong>hi1</strong> is within the iFrame and <strong>hi2</strong> is within the parent DOM. The javascript injected into the iFrame however removes <strong>hi2</strong> which it should not have access to, nor should it have access to the jQuery it's using to delete it.</p>
  
  <p>Thanks for your help.</p>