Estoy tratando de incrustar un iframe de documento de Google dentro de la aplicación web creada por Google-Apps-Scripts, sin embargo, no quiero que los usuarios tengan la capacidad de cambiar el interior del documento dentro del marco, sino simplemente 'vista previa' .
Después de considerar imposible agregar un controlador de eventos al iframe, logré deshabilitar todo tipo de entrada usando pointer-events: none; , sin embargo, todavía quiero que los usuarios puedan desplazarse por el interior del iframe.
¿Podrías ayudarme de alguna manera?
Lo resolví envolviendo el iframe en un <div> , deshabilitando los eventos de puntero y luego agregando un evento de movimiento de la rueda del mouse que activa el cambio del atributo de estilo en el iframe, luego, después de 250 ms, cambia pointer-events: none de nuevo. Encuentre mi solución adjunta:
<body> <div id="wrapper" > <iframe id='docFrame' style="pointer-events: none;" width="600" height="700" src="googledocexample.com"></iframe> </div> </body> <script> $(document).ready(function() { $('#wrapper').on('wheel', function () { $('#docFrame').prop('style', '') console.log('iframe active') setTimeout(() => { $('#docFrame').prop('style', 'pointer-events: none;') console.log('iframe dead') }, 250) }) }) </script>