javascript - 禁用右键单击嵌入元素内的 pdf

Question

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

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

但是当我右键单击该 t 时，我会看到保存和打印 pdf 的选项。我想阻止这些选项。

我试过了

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

但它禁止右键单击整个页面(PDF 除外)。

Answer 1

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

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

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