Html 元素隐藏在某些计算机上相同版本的Chrome中-Adblock

摘要

在我们的新工具发布时，带有一些广告预览的div不会显示在每个浏览器中。尽管我和我同事的浏览器版本完全相同。经过一段时间的调试，我们终于找到了Chrome插件

下面你可以看到整个故事。我标记了这个，这样就不用费心去想一个可能的答案，因为我有它给你：）。我在这里发布这篇文章是因为我还没有博客，我想和大家分享！我希望我们可以帮助您或您的同事程序员解决相同（类似）的问题

问题

今天，我们在内部CRM应用程序上发布了一个新工具，它根据员工和客户提供的数据创建广告。此工具能够在导出所有广告之前显示其中的部分（5）。此预览通过Ajax调用完成，该调用将使用提供的数据创建广告。我在localhost上开发了这个工具，将它上传到测试服务器，一切都很好。在几台拥有不同用户的计算机/浏览器上，一切正常。是时候发布这些东西了

我们将这些文件上传到服务器，添加了不同的数据库表，并使我们自己成为唯一一个在页面上进行最终检查的用户。我在我的电脑上做了一些检查（Win7和Chrome），一切都像在本地主机和测试服务器上一样正常工作。我的一位同事是开发负责人，他也在尝试使用这个工具。它工作得很好，但是

由于某种原因，“预览广告”在他登录自己的电脑时没有显示出来（Chrome Win 7）。起初，我们认为它必须与JavaScript有关。他必须刷新甚至清除缓存才能让它工作，但这并没有解决问题。控制台也没有抛出任何错误，所以

也许这和他的账户有关？因为他是首席发展官，当然我们想阻止他，因为我们可以：）。我们考虑ACL管理，因为我们有一些特殊的规则，所以我们可以访问，但员工不能。也许我们忘记了什么，但是它不得不在身份验证日志中抛出一个错误。但当他通过Firefox或我的电脑登录时，一切都正常工作。所以这与此无关

然后我们有了一个聪明的想法，在元素检查器中查看广告是否正确加载到DOM。它似乎在那里，所以这很奇怪。我们试图关闭一些在重新加载时临时隐藏ads包装器的类，但没有解决这个问题。所以我们开始摆弄这些元素。拖动它们，切换类和样式，但似乎没有任何效果。但是。。。他想出了一个主意，把包含广告的

拖到包装桌子的div外面。我们有这种结构，因为这个包装器还包含加载指示器，以便更容易地在它们之间切换。就在那里，桌子出现了。因此，我们现在知道它与包装器有关。但是什么呢

解决方案

在我的浏览器中进行了一些尝试、调试和再次尝试之后，我开始大声说：“相同的Chrome版本”、“相同的CSS”、“f5'd”、“插件”。。。等等什么？我的同事跑到他的电脑前说，这可能与此有关；然后转过身来。刷新页面后，出现了div（广告包装器）

所以，现在我们知道是什么导致了这个问题，但我们想知道为什么，我们想让每个员工都能使用这个工具。如果一个员工正在使用这个插件呢？我们不能强迫他关掉Adblock

<div id="ads-wrapper">
    <table> ... </table>
</div>

我在Chrome中打开了这个函数的used，看到了一个巨大的标签、url和其他我不想记住的东西的列表

在第5876行，我找到了以下行：

...
###ads-wrapper
...

前两个

##

似乎用来表示：嘿，这是一个属性，所以在函数Adblock plus中过滤它。因为以后您可以找到类似于

##.ads wrapper

的行。我们在这个文件中找到了前面尝试过的所有属性值。（在

background.js

中，您可以找到更多包含要隐藏的匹配项的文件。）

结论

查看并检查它们排除的类、id和其他属性以及url。请不要试图记住它们，但要看一眼。您将在这些值中找到一些模式，希望您能记住，即使您的意图不是显示广告，某些插件也会阻止您的内容

如果您的公共访问站点的访问者向您发送以下邮件，这可能会让您非常头疼：

嘿，你的网站不工作了。我看不到福吧

所以，希望你现在能思考一下这篇文章，并想一想：“也许这与adblocker插件以及我在id和类中的选择有关。”

已使用的链接

---

我将这个问题勾选为“回答你自己的问题”，因为我想分享我的发现，这是一个真正令人头痛的问题

你可以在原始帖子中找到完整的解决方案/答案。在否决这个答案之前，请注意这一点

解决方案摘要

AdBlock plus是一个Chrome插件，它似乎可以根据网站上的文件屏蔽url和具有指定属性的元素

查看并检查它们排除的类、id和其他属性以及url。请不要试图记住它们，但要看一眼。您将在这些值中找到一些模式，因此希望您能够记住，即使您不打算这样做，某些插件也会阻止您的内容

...
###ads-wrapper
...