如何使用svg clip-path防止iframe外的指针事件？ （Safari浏览器）

Question

我对iframe产生了视差效果，position: fixed。 iframe位于已使用SVG <clipPath/>剪切的容器内。 它适用于Chrome，Firefox和Safari浏览器。但在Safari中它可以部分工作。 Visiblity工作但不是事件。这些活动仍然可以在侧面盒子里找到。因此，如果我点击iframe外部它会触发iframe click事件。

  

N.B：由于这种方法，我想在页面/博客中注入全屏广告/视频iframe。我无法访问更改页面布局或样式的地方。

这是我的代码段。

document.getElementById("outBtn").addEventListener("click", function() {
  alert('clicked outside iframe')
});

(function() {
  var splitBoard = document.querySelector('.splitboard');
  if (!splitBoard) return;
  setTimeout(function() {
    var iframeElm = splitBoard.querySelector('iframe');
    if (iframeElm) {
      var isSafari = navigator.userAgent.indexOf('safari') > -1 && navigator.userAgent.indexOf('chrome') == -1;
      if (isSafari) {
        function onMouseMove(event) {
          var viewportOffset = splitBoard.getBoundingClientRect();
          if (!(event.clientY > viewportOffset.top + 15 && event.clientY < viewportOffset.bottom - 15)) {
            onMouseleave();
          }
        }

        function onMouseenter(event) {
          splitBoard.classList.add('active');
          iframeElm.style.pointerEvents = null;
          splitBoard.addEventListener('mousemove', onMouseMove, false);
        }
        splitBoard.addEventListener('mouseover', onMouseenter);

        function onMouseleave(event) {
          splitBoard.classList.remove('active');
          iframeElm.style.pointerEvents = 'none';
          splitBoard.removeEventListener('mousemove', onMouseMove);
        }
        splitBoard.addEventListener('mouseleave', onMouseleave);
      }
    }
  }, 2000);
})();

.wrapper {
  width: 500px;
  margin: 0 auto;
}

#outBtn {
  margin: 10px auto;
  display: block;
}

.splitboard {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(((100% - 100vw) / 2) - 8px);
  -webkit-clip-path: url(#clipSplitBox);
  clip-path: url(#clipSplitBox);
}

.splitboard-content {
  position: relative;
  width: 100%;
  height: 100vh;
}

.splitboard-content iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border: none;
}

.splitboard-content iframe {
  pointer-events: none;
}

.splitboard-content.active iframe,
.splitboard-content:hover iframe {
  pointer-events: all;
}

<div class="wrapper">
  <h3>Scroll the page</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dicta, sit sunt, consectetur beatae, eligendi quaerat cum ipsa laborum officia consequuntur facere ullam veritatis fugiat ipsam doloremque perspiciatis sapiente rem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta voluptatem a, ipsa beatae perferendis accusantium labore dolorum distinctio aut dolor, suscipit vel culpa mollitia ratione atque iure hic illo esse.</p>

  <div class="splitboard">
    <div class="splitboard-content">
      <iframe style="background:black" border="0" scrolling="no" srcdoc='<a href="javascript:alert(`clicked inside iframe`)"><img src="http://themesity.com/wp-content/uploads/templates/dexter/img/background/bg1.jpg" width="100%"><h2 style="color:#fff; position:absolute; top:50%; left:50%; padding:10px; background:rgba(0,0,0,0.5); margin: -20px 0 0 -105px">Click on the image</h2></a>'></iframe>
    </div>
  </div>
  <svg class="clip-svg" height="0" width="0">
    <defs>
      <clipPath id="clipSplitBox" clipPathUnits="objectBoundingBox">
        <polygon points="0 0.99, 0 0.01, 1 0.01, 1 0.99"></polygon>
      </clipPath>
    </defs>
  </svg>

  <button id="outBtn">CLICK HERE</button>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita suscipit rem modi eveniet ullam quis neque culpa vel, id a asperiores velit quam? Aut deleniti enim ab corporis nam modi!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum ipsam excepturi, porro blanditiis libero, expedita iste voluptatibus commodi consequatur deserunt enim quas autem nesciunt recusandae sapiente totam neque mollitia quia.</p>

</div>

点击此处查看完整的页面结果in CodePan

编辑JS解决方案 我已经开始使用Javascript解决方案了。希望任何人都可以给我任何其他非JS解决方案。 这是我的代码。

CSS

.splitboard-content iframe {
    pointer-events: none;
}

.splitboard-content.active iframe,
.splitboard-content:hover iframe {
    pointer-events: all;
}

JS

(function(){
    var splitBoard = document.querySelector('.splitboard');
    if(!splitBoard) return;
    setTimeout(function() {
        var iframeElm = splitBoard.querySelector('iframe');
        if (iframeElm) {
            var isSafari = navigator.userAgent.indexOf('safari') > -1 && navigator.userAgent.indexOf('chrome') == -1;
            if (isSafari) {
                function onMouseMove(event) {
                    var viewportOffset = splitBoard.getBoundingClientRect();
                    if (!(event.clientY > viewportOffset.top + 15 && event.clientY < viewportOffset.bottom - 15)) {
                        onMouseleave();
                    }
                }

                function onMouseenter(event) {
                    splitBoard.classList.add('active');
                    iframeElm.style.pointerEvents = null;
                    splitBoard.addEventListener('mousemove', onMouseMove, false);
                }
                splitBoard.addEventListener('mouseover', onMouseenter);

                function onMouseleave(event) {
                    splitBoard.classList.remove('active');
                    iframeElm.style.pointerEvents = 'none';
                    splitBoard.removeEventListener('mousemove', onMouseMove);
                }
                splitBoard.addEventListener('mouseleave', onMouseleave);
            }
        }
    }, 2000);
})();