running a html/script/css in an isolated space like iframe but without iframe

Question

I having some in house ad serving that serve html5 ads each ad contain its own css js and html.

i cant just put them in iframe because the website is based a lot of touch gesture and touch not working over iframe.

I can put pointer-events: none; over the iframe but then the ads won't be intractable.

so is there some special way of creating isolated chunk of code like iframe without iframes?

example:

<div class="website">
<h1> title</h1>

<isolate>
     every thing inside here will not be able to interact withevery thing outside isolate
    <script>
         $('h1') = will be empty because there is no h1 inside the isolated area
    </script>
</isolate>

*all the code the parent website and the ads sit on same website

Answer 1

You could possibly create your own selector function which could extend jQuery selector.

Maybe something like this:

function $_(ws, selector) {
  return $(ws).find(selector);
}

$(function(){
  result.innerHTML = $_(myIsolatedWorkspace, 'h1').text()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello world</h1>

<div id="myIsolatedWorkspace">
  <h1>Hello isolated world</h1>
</div>

<div id="result"></div>

You could do something like in this answer to obtain a reference to script's parent tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello world</h1>

<div class="isolated">
  <h1>Hello isolated world</h1>
  <script>
    (function(){
      var scriptTag = document.getElementsByTagName('script');
      scriptTag = scriptTag[scriptTag.length - 1];
      var isolated = $(scriptTag).closest('.isolated');
      
      function _(selector) {
        return isolated.find(selector);
      }
      
      
      $(function(){
         result.innerHTML = _('h1').text()
      })
    })()
  </script>
</div>

<div id="result"></div>