CSS：只允许在 <iframe> 中滚动

Question

我正在尝试在 Google-Apps-Scripts-made webapp 中嵌入一个 google 文档 iframe，但是我不希望用户能够更改内部框架内的文档，而不仅仅是 'preview' 它。

在认为向 iframe 添加事件处理程序是不可能的之后，我使用 pointer-events: none; 成功地禁用了各种输入，但是我仍然希望用户能够滚动 iframe 的内部。

你能帮我什么忙吗？

Answer 1

我已经通过将 iframe 包装在 <div> 中来解决，禁用指针事件，然后添加一个鼠标滚轮移动事件，该事件触发 iframe 中样式属性的更改，然后在 250 毫秒后切换它 pointer-events: none 又回来了。请找到我的解决方案附件：

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

CSS：只允许在 <iframe> 中滚动

CSS: allow only scrolling in <iframe>

javascript

css

google-apps-script

iframe