Search code examples
javascriptcssgoogle-apps-scriptiframe

CSS: allow only scrolling in <iframe>

I'm trying to embed a google document iframe inside of Google-Apps-Scripts-made webapp, however I don't want the users to have the ability to change the insides of the document inside the frame, rather just 'preview' it.

After deeming adding an event handler to the iframe impossible, I have succeeded in disabling every kind of input by using pointer-events: none;, however I still want the users to be able to scroll the insides of the iframe.

Could you help me in any way?

Solution

  • I have solved by wrapping the iframe in a <div>, disabling pointer events and then adding an on mouse wheel movement event which triggers the change of the style attribute in the iframe, then after 250ms switching it pointer-events: none back again. Please find my solution attached:

    <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>