前言

在上网冲浪浏览网页时，有些广告相对不是很友好，比如悬浮广告。这里将这些用户体验不友好、差的小广告称为“垃圾广告”。不得不说，这些“垃圾广告”真的是令人无语到极点。先不说这类广告的“横截面积”占到版面的比例夸张幅度，也不提及它们的不可关闭、不可隐藏或不可折叠问题，更别说它们所展现的内容所涉及的原则问题，仅其中的“佼佼者”对硬件设备性能的不良影响就是不可忽略的首要问题。在大力倡导“绿色环保”与“节能减排”的环保理念的当下，这完全是不可取的。

设计思路

现在，来探讨网页“垃圾广告”的解决思路。一般的思维逻辑是，果断直接地删除它就是最好的办法。通过隐藏的方式也是能够实现拒绝“垃圾广告”的目标。当然，最理想的途径是提供手动或定时自动折叠广告的功能。理论上，从技术的角度出发，三者皆是可能实现的，第三种方法的难度较高。折叠广告其实是隐藏起来。两者不同的地方是，隐藏广告是彻底的隐藏，不再显示，而折叠广告是使广告隐藏之后仍可手动再次展现出来。

具体方案

定位方式

常规情况下，一般通过HTML标签的属性来查找节点。查询“垃圾广告”的方式主要有通过以下四种HTML标签属性：
1）ID
2）Class
3）Tag Name
4）Name。

Id

var floatingAd = document.getElementById("ad_id_123");

Class

var floatingAds = document.getElementsByClassName("ad_class");

Tag Name

var floatingAds = document.getElementsByTagName("ad_tag_name");

Name

var floatingAds = document.getElementsByName("ad_name");

解决措施

删除

<!-- DELETE -->
floatingAd.parentNode.removeChild(adTag);

隐藏

<!-- HIDE -->
floatingAd.style.display = "none";

折叠

（略）

商业道德

广告是现代商业的一种关键模式。商家通过大量广泛的广告在消费者群体中来快速提高商品的知名度，进而提高其销量和营业收入。而广告经营者和发布者从中收取费用。很多时候，广告费用是网站的主要收入来源之一。完全禁止广告在经济上是不可行的。广告让人以为是单向传播作用于消费者受众的。实际上，在选择权方面，它应该是双向的。互联网广告（包括网站）常常被广告主曲解为代价昂贵且强制的。另一方面，作为受众的互联网网民却异常地反感甚至是抵制它们。在互联网广告遍地开花，甚至在某些角落泛滥成灾的同时，一种来自于追求收益效率的焦躁情绪悄然生根于广告主群体之中。事实上，与互联网广告相比，电视、电话、纸质媒体等形式的广告同样“迫切”追求资本回报效益。这些广告的投放方式一样包含奔向广大受众的热情，却缺少像互联网广告那样的“强制性”。

用最糟糕的广告投放方式来作比较。在现实生活中，最令人头疼的是那种“牛皮癣”一样的小广告，一种是张贴的纸质小广告，另一种是喷漆印刷体广告。我们能想到各种各样的去除方法，即使多花些时间也是可以完成的。如果你的网上冲浪经历足够丰富的话，相信你也一定曾遇到过那些糟糕头顶的悬浮广告。它们的共同特点通常是，无法关闭、版面较大、不规范导向且兼容性较差。对于它们中的稍次者，经验丰富、有一定计算机技术的冲浪者，通过安装屏蔽广告的浏览器插件或使用浏览器注入工具手动删除等方式可以应付。不过，这些手段对于具有自我修复功能的互联网广告就不够了。互联网，相对于电视、电话、纸质等媒介，具有在线即时多次反馈的特性。这是一个巨大的优点同时也是一个不容忽略的缺陷。特别是在能够自我修复的互联网广告上就显得尤为显著。这种智能的广告往往兼容性很糟糕，非常影响用户的体验感受。即使是熟练的互联网用户也无法屏蔽它们，除了具备专业的计算机技术。而绝大多数计算机用户是不具备这种能力的。这就涉及到了互联网广告的道德伦理问题。幸好互联网人文高速发展时至今日，这种糟糕的悬浮广告不再是主流。除了在一些小网站上仍可看到去不掉的“牛皮癣”广告，大部分网站早已摒弃这种不合规的方式。

笔记

其实，解决悬浮广告的方式不止以上提及的几种。BZ还能想到好几种延伸或决然不同的方法。这几种处理方式都是在问题出现之后，直接面对问题的。若能够在问题出现之前，就预判问题的根源所在，并以此为方向进行着手解决就更奇妙。或者说，悬浮广告是附加产品，如果能够处于分离主产品的场景，那也是一种微妙的过程。在一条道上躲不开甩不掉，那绕道而行也许是更好的选择。

附录及声明

本文所提及的代码、方法和思路（或设想）仅供学习参考交流之用途。对此之外的其他行为概不负责，请自行斟酌。

Javascript删除网页悬浮广告（一）相关推荐

【JS】网页悬浮广告及联系QQ客服侧边栏
网页悬浮广告及联系QQ客服侧边栏,广告跳动效果,及QQ客服隐藏效果 <script language="javascript" type="text/javascr ...
常见网页悬浮广告（JavaScript）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
wap手机网页悬浮广告代码遮盖原有网页内容怎么办？
wap手机网页广告代码遮盖原有网页内容怎么办? 这个也许是很多weber在做网页页面会遇到的问题,假如是在中间悬浮,最好的办法就是不要用了,这个没有好的解决办法,只要是广告肯定是要给客户看的,不 ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
如何对手机网页底部悬浮广告代码做翻转效果，这样做就好了
如何对手机网页底部悬浮广告代码做翻转效果,这样做就好了首先你要有悬浮层,然后给予CSS赋样式,样式如下: //作者:xycms //update:20190442 //QQ:364500483 va ...
HTML+CSS+JavaScript实现网页广告
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
手机（wap）网页底部固定悬浮广告带轮播特效代码
// 作者:xycms // 网址:http://wwww.jsxyidc.com // 日期:2019-03-3 // QQ:364500483 // code:网页底部悬浮广告代码,带单独关闭va ...
JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...

Javascript删除网页悬浮广告（一）