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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
采用call方式实现js继承
May 20 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
JavaScript实现星级评分
Jan 12 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
Vue组件模板及组件互相引用代码实例
Mar 11 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
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python读写/追加excel文件Demo分享
2018/05/03 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
Servlet的生命周期
2013/08/25 面试题
社会实践评语
2014/04/28 职场文书
大学新闻系自荐书
2014/05/31 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
大学生实习介绍信
2015/05/05 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis