如何使用浏览器中的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="http://www.srcmini.com/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>

【如何使用浏览器中的JavaScript防止破坏者被发现】执行该功能后, 你的元素将具有模糊效果, 以防止读取损坏的内容。
防止扰流板快乐！