禁用右键单击嵌入元素内的 pdf [英] Disable right click on pdf inside embed element

问题描述

我有一个 embed 元素，我在其中提供了 pdf 文件的路径.我想阻止它被下载.

<embed src="test.pdf" width="760" height="800" oncontextmenu="return false"/>

但是当我右键单击该 t 时，我可以选择保存和打印 pdf.我想阻止这些选项.

我试过了

但它禁用了对除 PDF 之外的整个页面的右键单击.

解决方案

一个不受 CORS 或 CSP 影响的简单可靠的解决方案是用另一个元素覆盖嵌入.我在这里使用图像是因为您无法在堆栈溢出时嵌入 pdf.

.embed-cover {位置:绝对；顶部:0；左:0；底部:0；右:0；/* 只是为了演示，删除这部分 */不透明度:0.25；背景颜色:红色；}.包装{位置:相对；溢出:隐藏；}/* 不重要*/图像{宽度:300px}

<h3>普通的img/embed/object元素</h3><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"><hb/><h3>带盖</h3><div class="wrapper"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"><div class="embed-cover"></div>

覆盖元素捕获"任何点击事件并阻止它们到达底层元素(在本例中为图像)

I have an embed element in which I provided path to pdf file. I want to prevent it from being download.

<embed src="test.pdf" width="760" height="800" oncontextmenu="return false" />

but when I right click on that t gives me options to save and print pdf. I want to prevent these options.

I tried

<script type="text/javascript">
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    }, false);
</script>

but it disables right click on entire page except for PDF.

解决方案

One simple and reliable solution, that is not affected by CORS or CSP, is to cover the embed with another element. I'm using an image here because you cannot embed pdfs on stack overflow.

.embed-cover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
  /* Just for demonstration, remove this part */
  opacity: 0.25;
  background-color: red;
}

.wrapper {
  position: relative;
  overflow: hidden;
}


/* Not Important*/
img {
  width: 300px
}

<h3>Normal img/embed/object element</h3>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">

<hb/>

<h3>With cover</h3>
<div class="wrapper">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
  <div class="embed-cover"></div>
</div>

The covering element 'catches' any click events and prevents them from reaching the underlying element (the image in this case)

这篇关于禁用右键单击嵌入元素内的 pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！