如何禁用点击但仍允许在 iframe 中滚动？

Posted 2023-03-06

【中文标题】如何禁用点击但仍允许在 iframe 中滚动？

【英文标题】：How can I disable clicks but still allow scrolling in an iframe?

【发布时间】：2017-09-23 07:08:56

【问题描述】：

我有一个 iframe 在我的页面上显示在一个固定高度的面板中，但在 iframe 中呈现的页面要大得多。 我不希望用户能够点击 iframe 中的任何内容。我知道对此的一般解决方案是在 iframe 顶部有一个不可见的 div 以禁用所有交互。但是，这也会禁用滚动功能。 是否可以捕获并忽略 iframe 页面上的任何点击，但仍允许传播滚动？

【问题讨论】：

猜测 iframe 不在您的域中。

不，不在我的域中

真的没有什么可以做的。您可以猜测页面的高度并将 iframe 设置为完整大小，然后在页面上滚动 div。

不正确，你可以做很多事情。 Simpy 将您自己的 javascript 注入到域中，并假设您启用了 jQuery，您可以使用类似 $('button').click(function()) 和类似函数来禁用由 a 的所有交互式元素触发的事件网站。

我不认为你可以像那样注入javascript跨域。

【参考方案1】：

如果您不希望 iframe 的内容可被用户交互，您可以禁用其上的指针事件。但是，如果您希望它可以滚动，只需将一个完整大小的 iframe 放在一个带有溢出的较小 div 中：滚动。

div 
  width: 50vw;
  height: 50vh;
  overflow: scroll;


iframe 
  width: 100vw;
  height: 100vh;
  pointer-events: none;

<div>
  <iframe src="http://example.com"></iframe>
</div>

【讨论】：

这里的问题是 iframe 可以是任意高度，因此“全尺寸”iframe 没有任何价值。我可以将 iframe 设置为过大，但这只会在底部留下很多空白空间，看起来很糟糕。