阅读器视图破坏了保护图像免受右键单击的 Javascript答案

【问题标题】：Reader view breaks Javascript protecting images from right-click阅读器视图破坏了保护图像免受右键单击的 Javascript
【发布时间】：2019-12-14 09:01:27
【问题描述】：

我知道保护图像远非万无一失。但是，客户要求它，所以我在一个旨在防止右键单击保存/下载的网站上安装了 Javascript。

阅读器视图似乎同时忽略了 Javascript 和网站的 CSS。我尝试根据规则 .moz-reader-content (Firefox) 添加 {display:none}。我假设所有浏览器都是这种情况。

搜索也没有成为检测读者浏览量的方法。

是否有人对此问题有任何建议或知道解决方案？

【问题讨论】：

标签： firefox-reader-view

【解决方案1】：

如您所知，没有万无一失的解决方案。不管你做什么，如果它是可见的，它就可以被复制。（以截图作为最后的手段）。

话虽如此，一个简单且令人惊讶的有效解决方案就是将每个图像覆盖一个透明的 .png 文件。

<div id="imagecontainer" style="position:relative;">
    <img src="yourimage.png" style="position:absolute;top:0px;left:0px;">
    <img src="transparent-overlay.png" style="position:absolute;top:0px;left:0px;">
</div>

右键单击图像，然后单击叠加层而不是图像本身。（当然，您会希望给叠加层起一个不太明显的名称）。

此外，您应该为图像本身添加水印。

为了解决阅读器视图问题（我不确定您说的是哪种阅读器视图），您可以尝试使用 javascript 来实际填充图像本身。（假设你的读者视图不允许 js）。

例如：

var i = document.createElement('img');
var o = document.createElement('img');
i.src = 'yourimage.png';
o.src = 'transparent-overlay.png';
document.getElementById('imagecontainer').appendChild(i);
document.getElementById('imagecontainer').appendChild(o);

在后一个 js 示例中，您还需要将 css 样式设置为在#imagecontainer 中绝对定位两个图像。

【讨论】：