iframe内部再次嵌套iframe禁用右击事件

孜然卷k

已于 2022-10-27 14:50:46 修改

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript学习文章标签：前端 javascript html

于 2022-09-15 11:49:23 首次发布

本文链接：https://blog.csdn.net/M_E_i/article/details/126868080

JavaScript学习专栏收录该内容

26 篇文章

订阅专栏

博客讲述了在嵌套iframe的场景下，如何阻止内嵌的PDF和视频被用户通过浏览器右键菜单下载。作者尝试了通过禁用contextmenu事件，但未能解决内部iframe的右键问题。最后，采用了一个CSS解决方案，通过设置iframe的z-index和透明度，使得用户点击实际上是在覆盖iframe的div上，从而规避了右键下载的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求背景：在一个嵌套于别的项目之下的iframe中，需要实现预览pdf/视频/图片等文件，并且按权限分配是否能下载。

正常开发都已经满足需求，但是测试发现浏览器自带右击可以另存为/保存

好嘛，来解决这个右击问题

网上看到很多解决方法是 document.oncontextmenu = () => { return false }

document.oncontextmenu = () => { return false }

现在这个项目是一个iframe嵌套于一个项目之中

现在再次引用PDF就等于是iframe里面再次嵌套iframe

使用后能解决引用外层的iframe的右击问题，但是内部引用的PDF和视频图片依然可以右击QAQ

这时候突然想到了一个旁门左道解决这个问题使用css的定位让iframe元素在外层div之下，然后用个opacity透明度让用户依然能看到底层的iframe，但实际点击已经都在外层的div上了

 <iframe id="myIframe" src={`${src}?page=hsn#toolbar=0`} style={{ border: "none", width: '100%', height: '100vh', zIndex: -6, position: 'relative' }}></iframe>

<div className="iframess">
          <iframe id="myIframe" src={`${src}?page=hsn#toolbar=0`} style={{ border: "none",         
          width: '100%', height: '100vh', zIndex: -6, position: 'relative' }}></iframe>
 </div>