Блог

Я пытаюсь создать сценарий, в котором, если кто-то нажмет на iframe, откроется новое окно для проверки того же URL-адреса на вкладке веб-браузера. Но прокрутка и другие события мыши в iframe не повлияют на это.

Я пробовал разные подходы, но ничего не получалось

Подход 1: пытался получить событие onClick самого iframe, но проблема кросс-происхождения сохраняется

Подход 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;
}
  

Скрипка: здесь

Возможно ли реализовать этот сценарий с помощью URL-адреса с перекрестным источником?

Ваш код не работает, потому что вы pointer-events: none; установили его. Вы можете сделать так, что вы нажимаете «наложение кнопок» и перенаправляете пользователя с помощью javascript, после нажатия он «удаляет» наложение кнопок.

В моем случае я установил красный фон, чтобы было понятно, и я не удаляю кнопку, я просто скрываю ее. Вы можете настроить свой вариант использования. Также обратите внимание, что этот скрипт допускает только один из этих фреймов и кнопок. Если у вас есть больше, скрипт необходимо изменить, чтобы выполнить цикл и добавить EventListeners в button и посмотреть на его родительский элемент, чтобы добавить класс в контейнер (или если вы просто удалите кнопку)

 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>