onClick iframe 重定向到 src url

Question

我正在尝试制作一个场景，如果有人点击 iframe，它将打开一个新窗口来检查 Web 浏览器选项卡上的相同 URL。但 iframe 上的滚动和其他鼠标事件不会影响它。

我尝试了不同的方法，但没有任何效果

方法1：尝试获取iframe本身的onClick事件，但问题是跨域持续存在

方法 2：尝试将 onClick 事件提供给 iframe 的父元素，但由于 iframe 的指针事件启用，它不会让父 onClick 工作。

方法 3：尝试在 iframe 上方叠加锚标记。它确实有效，但它停止了 iframe 滚动。

这是我的代码：

<div>
   <iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   <a href="https://fr.wikipedia.org/wiki/Main_Page" target="_blank"></a>
</div>
iframe {
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
a {  
 width: 100%;
 height: 100vh;
 position: absolute;
 top: 0;
 left: 0;
}

小提琴：here

是否可以通过跨域URL实现这个场景？

Answer 1

您的代码不起作用，因为您设置了pointer-events: none;。您可以这样做，即单击“按钮叠加层”并使用 javascript 重定向用户，一旦单击它就会“删除”按钮叠加层。

在我的情况下，我将背景设置为红色只是为了让它清楚，我没有删除按钮，我只是隐藏它。您可以根据自己的用例进行调整。另请注意，此脚本仅允许其中一个 iframe 和按钮。如果您有更多脚本必须修改以循环并将 eventListeners 添加到按钮并查看其父级以在容器上添加类（或者如果您只是删除按钮）

const redirectAction = document.querySelector('.js-open-url')
redirectAction.addEventListener('click', function() {
  window.open(
    redirectAction.dataset.href, 
    '_blank'
  )
  
  document.querySelector('.container').classList.add('container--is-open')
})

.container {
  position: relative;
}

iframe {
  width: 100%;
  height: 100vh;
}

.button {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: red;
}

.container--is-open .button {
  display: none;
}

<div class="container">
  <iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
  <button class="button js-open-url" data-href="https://fr.wikipedia.org/wiki/Main_Page"></button>
</div>