iframe (встроенный фрейм) – это HTML-элемент, который позволяет встроить другой HTML-документ в текущий документ. По умолчанию iframe наследует поведение щелчка от родительского документа. Однако могут быть случаи, когда вы захотите отключить клики внутри iframe, чтобы предотвратить взаимодействие пользователя с его содержимым. В этой статье мы рассмотрим несколько методов достижения этой цели и предоставим примеры кода для каждого подхода.

Метод 1: отключение событий указателя с помощью CSS
CSS можно использовать для отключения событий указателя, включая клики, в элементе iframe. Добавьте следующее правило стиля в файл CSS или встроенный стиль:

iframe {
  pointer-events: none;
}

Это предотвратит запуск событий кликов внутри iframe.

Метод 2. Запретите действие по умолчанию с помощью JavaScript.
Используя JavaScript, вы можете перехватывать события кликов внутри iframe и предотвращать их действия по умолчанию. Вот пример фрагмента кода:

const iframe = document.querySelector('iframe');
iframe.addEventListener('click', function(event) {
  event.preventDefault();
});

Этот код присоединяет прослушиватель событий кликов к элементу iframe и предотвращает действие по умолчанию, фактически отключая клики внутри iframe.

Метод 3. Захват и блокировка событий кликов с помощью JavaScript.
Другой подход – фиксировать события кликов внутри iframe и блокировать их дальнейшее распространение. Вот пример:

const iframe = document.querySelector('iframe');
iframe.contentWindow.addEventListener('click', function(event) {
  event.stopPropagation();
});

Вызывая stopPropagation()для события клика, вы предотвращаете его всплеск до родительского документа, фактически отключая клики внутри iframe.

Метод 4: наложение прозрачного элемента div поверх iframe
Вы можете наложить прозрачный элемент div поверх iframe, чтобы перехватывать и блокировать события кликов. Вот пример:

<div >
  <iframe src="your-iframe-source" ></iframe>
  <div ></div>
</div>

Прозрачный элемент div с более высоким z-индексом будет фиксировать клики, предотвращая их попадание в iframe ниже.

Отключить клики внутри iframe можно разными способами. Применяя стили CSS, используя прослушиватели событий JavaScript или накладывая прозрачный элемент div, вы можете предотвратить взаимодействие пользователя внутри iframe. Выберите метод, который лучше всего соответствует вашим требованиям, и реализуйте его соответствующим образом.