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

您应该使用iframe并注入您的JavaScript代码。

要做的事情：

使用iframe代码代替嵌入代码，并使用myFrame作为ID。例如：

<iframe id="myFrame" width="760" height="800" />

在父文档中，从DOM获取iframe。
调用iframe的window.eval方法，使用

'document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    }, false);'

作为字符串参数。

现在，iframe不应该通过右键单击来实现。

最后应该是这样的：

var myFrame = document.getElementById('myFrame');

myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');

Answer 2

一个不受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>

covering元素会“捕获”所有点击事件，并阻止它们到达底层元素（在本例中为图片）

Answer 3

通过 Wendelin 的回答，我能够实现我想要实现的目标。

<html>
<head>
    <style>
        .embed-cover {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          
          /* Just for demonstration, remove this part */
          opacity: 0.25;
        }

        .wrapper {
          position: relative;
          overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        function disableContextMenu() {
            window.frames["pdfframe"].contentDocument.oncontextmenu = function(){return true;};   
            var myFrame = document.getElementById('pdfframe');
            myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');
        }

    </script>
</head>
<body onload="disableContextMenu();" oncontextmenu="return false">
    <div class="wrapper">
        <embed id="pdfframe" src="<url of myfile.pdf>#toolbar=0" width="100%" height="100%" ></embed>
        <div class="embed-cover"></div>
    </div>
</body>

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

3 个答案: