1

我有一些提供 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>

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

4

1 回答 1

-2

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

也许是这样的：

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>

您可以在此答案中执行类似操作来获取对脚本父标记的引用。

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

于 2017-05-18T16:34:49.163 回答