JS前端广告拦截实现原理解析


Posted in Javascript onFebruary 17, 2020

这篇文章主要介绍了JS前端广告拦截实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

主流的浏览器,默认都开启了广告过滤,这对于用户(浏览者)来说,不但加快了访问网页的速度,而且也避免了勿点一些垃圾色情的东西,可以说绿色了网络环境。

第一、对于正常的广告拦截前端开发需要注意的是:

在请求图片与js文件、接口、文件内容最好不要包含ad、guanggao等关键词,可能被拦截

我们可以用一个请求来判断浏览器有没有开启广告拦截,如果我们需要插入广告,可以提示用户关闭广告拦截

<script src="http://demo.3water.com/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
/*这个js文件的内容为var killads = true;*/
<script type="text/javascript"> 
if (typeof(killads)=='undefined'){alert('广告被过滤');} 
</script>

第二、浏览器对window.opne()的拦截,我们可以通过var x =window.open(url);然后判断x == undefined来判断新窗口是否被拦截。

(一)、 一般情况下,如果在js中调用window.open()函数去打开一个新tab页,浏览器会进行拦截,认为打开的是一个广告页。

(二)、所以如果不想让浏览器拦截,可以将这个“函数”改为用户点击时触发,这样浏览器就认为是用户想访问这个页面,而不是你直接弹出给用户。

(三)、即使是用户点击事件,如果在一次事件里调用多次window.open()函数,则只有第一次被当作正常打开,之后的还是会被当作广告页。

(四)、如果在点击事件里有ajax调用,window.open()在回调函数里执行,则浏览器仍然认为是js调用并当作广告拦截。除非ajax设置为“同步”模式。也可以用下面的方法解决

var newWin = window.open(); 
$.ajax({ 
  url:xxx, 
  success: function(data){ 
    newWin.location = data.url; 
  } 
});

(五)、其他场景:

有的下载功能是这样实现的,当用户点击某个按钮后,在后台生成一个地址返回给前端,前端在请求的回调方法中,通过window.open()打开这个链接

由于前端需要给后台发送异步请求,所以window.open()也会被拦截

可行的方法是,在回调之后,生成一个<a>标签,且href设置为下载地址,然后触发这个<a>标签的点击事件,注意:<a>标签一定要加一个download属性,否则还是会被拦截

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript强大的日期函数代码分享
Sep 04 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
判断访客终端类型集锦
Jun 05 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 #Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 #Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 #Javascript
Vue的双向数据绑定实现原理解析
Feb 17 #Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 #Javascript
javascript异常处理实现原理详解
Feb 17 #Javascript
Vue+webpack实现懒加载过程解析
Feb 17 #Javascript
You might like
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python中pow函数用法及功能说明
2020/12/04 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
党支部组织生活会整改方案
2014/09/30 职场文书
2014年保洁工作总结
2014/11/24 职场文书
理解python中装饰器的作用
2021/07/21 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android