Tengo un script que inicia el iframe de mi sitio web en varios sitios web de terceros.
Necesito detectar elementos que se superponen sobre el iframe para evitar el uso indebido de iframe, por ejemplo, cubrir iframe parcialmente con algunos botones.
El único enfoque confiable que se me ocurre es ejecutar periódicamente getBoundingClientRect() para cada elemento de la página para garantizar que nada se superponga. Pero eso suena como cálculos muy pesados que me gustaría evitar.
He agregado un fragmento de código con un ejemplo de botón de estafa. ¿Cómo podría detectar/resolver este problema de manera eficiente y confiable?
const frame = document.createElement('iframe') frame.src = 'https://www.w3.org/TR/css-transitions-1/' document.querySelector('.frame-container').append(frame); .frame-container { width: 100%; height: 500px; } iframe { width: 100%; height: 100%; } .scam-button { font-family: Arial; position: fixed; text-decoration: none; background: #2a5e9a; z-index: 33312312312; color: white; padding: 30px 10px; top: 40px; width: 250px; text-align: center; right: 20px; border-radius: 7px; align-items: center; justify-content: center; display: flex; } .scam-button img { width: 40px; } <a href="#scam" class="scam-button">Join 1000000$ draw by <img src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" /></a> <div class="frame-container"></div>