如何使用浏览器中的JavaScript防止破坏者被发现

本文概述

• 1.下载并包含Spoiler Alert
• 2.使用插件

你是否举办了论坛或相关活动, 用户可以在其中发布有关游戏, 电影, 书籍等的观点, 教程等？可能不是, 你有义务允许发布者隐藏包含有关某个主题的敏感信息(破坏者)的内容。否则, 访问网站的人如果发现蝙蝠侠的真实身份是布鲁斯·韦恩(Bruce Wayne), 也许永远不会回来, 也许不是带有平庸但重要的主题。

网络上有很多解决此问题的解决方案, 但是其中大多数解决方案都过于激进且非常糟糕。通过使用简单的CSS, 一旦将鼠标移到包含扰流板的项目上, 你可能已经知道它的全部用途, 甚至从不想要它。这就是为什么在本文中, 我们将向你展示如何在能够完美处理此功能的JavaScript插件的帮助下使用模糊隐藏剧透。

1.下载并包含Spoiler Alert

为了实现你的目标, 我们建议你使用Spoiler Alert插件。该插件可让你隐藏带有SVG模糊效果的文本和图像。通过鼠标悬停, 你的用户将获得有关剧透的提示, 并且通过单击将了解其全部含义。因此, 借助JavaScript和一些模糊处理, 你的网站内容将保护访问者的知识。

从官方资源库下载Spoiler Alert脚本的副本, 此处为缩小版本或完整版本。另外, 你可以使用免费的CDN。然后使用简单的脚本标记将其包括在你的文档中：

<!-- From the CDN -->
<script src="https://cdn.rawgit.com/joshbuddy/spoiler-alert/master/spoiler.min.js"></script>

<!-- Or from a minified local copy -->
<script src="spoiler.min.js"></script>

到现在为止, 该插件还不能与模块捆绑程序一起用作browserify或webpack(使用require), 因为它在窗口中创建了一个全局变量, 即spoilerAlert。有关此插件的更多信息, 请访问Github上的官方存储库。

2.使用插件

如前所述, 该插件在spoilerAlert变量中全局公开。此变量是一个最多包含2个参数的函数。第一个参数是查询选择器字符串, 用于选择将应用模糊的所有所需元素。此查询将在内部与document.querySelectorAll(你的选择器)函数一起使用。以下示例显示了如何使用Spoiler类模糊Spoiler标签和元素：

<p>The secret identity of Bruce Wayne is <spoiler>Batman</spoiler></p>

Listen to me carefully, <span class="spoiler">Mark David Chapman</span> killed John Lennon because <span class="spoiler"> he had a lot of psychological issues, one of them being that he literally heard voices in his head.</span>

<script>
    spoilerAlert("spoiler, .spoiler");
</script> 

这意味着你可以模糊文档中的任何元素(事件整个html文档)。第二个参数是可选的, 需要是具有2个属性(即max和partial)的对象。这些值是每个相位上元素所需的模糊值(默认为鼠标悬停时为部分, 没有鼠标悬停时为最大值), 默认情况下, 如果未提供此参数, 则spoilerAlert将max设置为4, 部分设置为2：

<p>The secret identity of Bruce Wayne is <spoiler>Batman</spoiler></p>

Listen to me carefully, <span class="spoiler">Mark David Chapman</span> killed John Lennon because <span class="spoiler"> he had a lot of psychological issues, one of them being that he literally heard voices in his head.</span>

<script>
    spoilerAlert("spoiler, .spoiler", {
        max: 10, partial: 5
    });
</script> 

执行该功能后, 你的元素将具有模糊效果, 以防止读取损坏的内容。

防止扰流板快乐！