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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
js属性对象的hasOwnProperty方法的使用
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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
在线课程:Skillshare
2019/04/02 全球购物
社区工作者感言
2014/03/02 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
功夫熊猫观后感
2015/06/10 职场文书
python某漫画app逆向
2021/03/31 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS