JavaScript  cookie 跨域访问之广告推广


Posted in Javascript onApril 20, 2016

在实际应用中, 跨域使用天气预报组件可以使用上面的方式实现,另外一种常用的就是显示某些电商的广告,此广告中会滚动您访问过的产品或者关联想推介给你的产品。

比如在某个A网页中显示了两种广告:

某东的广告,里面显示的东西,都是访问过滴,并且加推了相关的东西

JavaScript  cookie 跨域访问之广告推广

某宝的广告,基本一样呈现方式。

JavaScript  cookie 跨域访问之广告推广

当访问某东某宝的商品时,会把信息放到cookie中,呈现时会根据cookie中的商品信息进行呈现。

问题来了。

A网页所在的站点和某东某宝的站点肯定是独立的两个域名,在A网页中访问某东某宝的cookie是拿不到滴,因为不同源,那么

在A网页中的本身去呈现商品信息是做不到而且也不合适。

当然就要通过跨域的方式去呈现商品信息,需要解决的问题就是:

1.跨域服务生成的脚本中不能获取cookie,只能是在跨域的服务端获取cookie

为什么?,跨域服务生成的脚本最终是要在A网页上运行,在跨域服务生成的脚本中访问的cookie只能是A网页所在站点的cookie,那就不对了

2.跨域服务后台能够拿到cookie

答案是肯定的,浏览器只要向某个域名/地址发起请求,就会把其对应的cookie带过去。

那么,我们来实现个简单的demo

demo架构:node.js+express

1.在跨域服务上,可以理解成某电商,提供了一个页面,用来输入商品信息,模拟访问过的东西,输入后保存到cookie中。

页面

JavaScript  cookie 跨域访问之广告推广

代码中就是把输入的东西加上一个过期时间保存进cookie中,当然先简单编个码。

<!DOCTYPE html>
<html>
<head>
<title>setCookie</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>看过的商品</h1>
<div>
<span>商品1</span><input id="s1">
</div>
<p></p>
<div>
<span>商品2</span><input id="s2">
</div>
<p></p>
<div>
<span>商品3</span><input id="s3">
</div>
<p></p>
<div>
<span>商品4</span><input id="s4">
</div>
<p></p>
<div>
<input id="b" type="button" value="保存进cookie" onclick="saveInCookie();">
</div>
<script>
function saveInCookie(){
//所有商品信息
var eleS1=document.getElementById('s1');
var eleS2=document.getElementById('s2');
var eleS3=document.getElementById('s3');
var eleS4=document.getElementById('s4');
//生成24小时后过期的参数
var date=new Date();
var expiresMSeconds=3*24*3600*1000;
date.setTime(date.getTime()+expiresMSeconds);
//商品信息全部设置到cookie中
document.cookie='s1='+escape(eleS1.value)+";expires="+date.toGMTString();
document.cookie='s2='+escape(eleS2.value)+";expires="+date.toGMTString();
document.cookie='s3='+escape(eleS3.value)+";expires="+date.toGMTString();
document.cookie='s4='+escape(eleS4.value)+";expires="+date.toGMTString();
alert(document.cookie);
}
</script>
</body>
</html>

2.在跨域服务上,写一段服务端生成脚本的代码,在生成脚本时,把浏览器带过来的cookie中的数据解码取出后拼到脚本中。

这里是通过request对象取出cookie,可能其他平台的方式不一样,但原理都是一样,浏览器是会带过来。

router.get('/ad', function (req, res) {
//拼接一JS字符串,完成向html页面中输出html标记
printCookies(req.cookies);
var s = 'document.write(\'<div style="background-color:red;width:10rem;height:10rem">商品广告';
//将cookie中所有的商品取出,拼到脚本字符串中
for (var p in req.cookies) {
s += '<div>' + unescape(req.cookies[p]) + '</div>';
}
s+='</div>\');';
console.log(s);
res.setHeader('content-type', 'text/javascirpt;charset=utf-8');
res.write(s);
res.end();
});
function printCookies(cookies) {
console.log('******cookies******');
for (var p in cookies) {
console.log(p + '=' + unescape(cookies[p]));
}
console.log('*******************');
}

3.在本地网站的A网页中对跨域服务进行脚本请求。

其中,通过script标签引用了跨域服务上提供脚本的地址。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="/stylesheets/style.css"></head>
<body>
<script src="http://localhost:3001/ad"></script>
<h1>航班信息</h1>
<h4>航班号:MU532</h4>
<h4>起飞:北京</h4>
<h4>抵达:上海</h4>
</body>
</html>

页面运行后,像下图一样,就能将访问过的商品信息列出,累似打了一个小广告。

JavaScript  cookie 跨域访问之广告推广

如此,完成。

关于JavaScript  cookie 跨域访问之广告推广 的相关知识就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
layui实现三级联动效果
Jul 26 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 #Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 #Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 #Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 #Javascript
javascript实现简单计算器效果【推荐】
Apr 19 #Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 #Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
初中同学聚会感言
2014/02/11 职场文书
股权转让协议书
2014/04/12 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
导游词之凤凰古城
2019/10/22 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
一行Python命令实现批量加水印
2022/04/07 Python