firefox-reader-view - 阅读器视图破坏了保护图像免受右键单击的 Javascript

Question

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

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

搜索也没有出现检测读者视图的方法。

有没有人有任何建议或知道这个问题的解决方案？

Answer 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 中绝对定位两个图像。