title: Script inside iframe is overriding main page's JS
body: <p>I am trying to use iframe to render an HTML document. That HTML Document can be anything, it's dynamic.</p>
  
  <p>I have used jquery.min.js in my website. and HTML content i am rendering, contains import to jquery-3.3.1.slim.min.js</p>
  
  <p><code>slim</code> version of jquery used in iframe is overriding jquery of main page. Which is resulting in <code>$.ajax is not a function</code>.</p>
  
  <p><strong>How Can i restrict iframe to not override</strong></p>
  
  <pre><code>&lt;script src="/static/vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;iframe id="some-id"&gt;
      #document
         &lt;html&gt;
             &lt;head&gt;&lt;/head&gt;
             &lt;body&gt;
                 &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
             &lt;/body&gt;
         &lt;/html&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>In JS file i used below to set my content</p>
  
  <pre><code>$('#modal-html').contents().find('body').html(myhtmlcode);
  </code></pre>
  
  <p>I tried using sandbox to block javascript execution. It's not working.</p>