Question

我有一些内部广告投放服务html5广告，每个广告都包含自己的css js和html。

我不能把它们放在iframe中，因为该网站基于很多触摸手势而触摸不能在iframe上工作。

我可以将pointer-events: none;放在iframe上，但广告不会难以处理。

那么是否有一些特殊的方法可以创建像iframe那样没有iframe的孤立代码块？

示例：

<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>

*父网站和广告的所有代码都位于同一网站

Answer 1

您可以创建自己的选择器函数，它可以扩展jQuery选择器。

也许是这样的：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以在this answer中执行某些操作，以获取对脚本的父标记的引用。

＆＃13;

<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>

＆＃13;

在像iframe但没有iframe的隔离空间中运行html / script / css

1 个答案: