0
394
Vistasiframe no carga la página HTML Quiero realizar la operación onClick en él, pero HTML funciona por sí solo
La pregunta que tengo es que no quiero que mis páginas HTML funcionen en el iframe, sino que solo se muestren y cuando alguien haga clic en ellas, se abrirá una nueva página.
En este momento, el iframe central de la fila superior tiene un audio y se está reproduciendo al hacer clic de manera similar en el primer iframe de la fila inferior tiene un menú desplegable que funciona, pero quiero que si alguien hace clic en cualquier lugar, debería abrir una página correspondiente
pointer-events none también está deshabilitando el evento onclick.
1 Respuestas
Responde la pregunta0
En primer lugar, debe agregar algún tipo de contenedor sobre el iframe para bloquear cualquier interacción con el iframe. Además, ese contenedor debe estar vinculado a un evento de clic del mouse que lo llevará a la página que se muestra en el iframe.
Aquí hay un ejemplo de trabajo:
// Here is an event listner to bind a click event to the container // that covers the iframe. // All it does is take you to the page that the iframe is displaying document.getElementById("cover-iframe").addEventListener('click', () => { document.location.href = 'test.html' }) /* Set the size of this container (width, height) to change the size of the iframe */ .container { position: relative; width: 50rem; } .iframe { width: 100%; } /* This is to make the container cover the iframe */ #cover-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); cursor: pointer; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <!-- This container is to hold the iframe and the container that will cover the iframe --> <div class="container"> <!-- "test.html" can be changed to the page you want to display --> <iframe src="test.html" frameborder="1" class="iframe"></iframe> <span id="cover-iframe"></span> </div> </body> </html>Agregué comentarios al código anterior para que se explique por sí mismo.