菜单

JavaScript cookie 跨域访问之广告推广

2019年7月11日 - 皇家前端

在实质上采纳中,
跨域使用天气预告组件能够使用方面包车型地铁艺术贯彻,其余一种常用的正是体现有个别电商的广告,此广告中会滚动您访问过的制品照旧关联想推荐介绍给你的产品。

例如说在有些A网页中突显了三种广告:

某东的广告,里面彰显的东西,都以访谈过滴,何况加推了有关的事物

图片 1

某宝的广告,基本雷同展现格局。

图片 2

当访谈某东某宝的货物时,会把消息放到cookie中,彰显时会依据cookie中的商品音信实行展现。

问题来了。

A网页所在的站点和某东某宝的站点确定是独立的五个域名,在A网页中会见某东某宝的cookie是拿不到滴,因为差异源,那么

在A网页中的本人去变现商品音讯是做不到况且也不妥贴。

本来就要通过跨域的情势去变现商品音讯,须要消除的标题正是:

1.跨域服务浮动的本子中不可能收获cookie,只能是在跨域的服务端获取cookie

缘何?,跨域服务调换的剧本最后是要在A网页上运转,在跨域服务浮动的台本中拜谒的cookie只好是A网页所在站点的cookie,那就难堪了

2.跨域服务后台能够获得cookie

答案是迟早的,浏览器只要向有个别域名/地址发起呼吁,就能把其相应的cookie带过去。

那么,大家来贯彻个简易的demo

demo架构:node.js+express

1.在跨域服务上,能够知道成某电商,提供了二个页面,用来输入商品音讯,模拟访谈过的事物,输入后保存到cookie中。

页面

图片 3

代码中正是把输入的事物加上二个逾期时光保存进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>
商品1<input id="s1">
</div>
<p></p>
<div>
商品2<input id="s2">
</div>
<p></p>
<div>
商品3<input id="s3">
</div>
<p></p>
<div>
商品4<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> 

页面运营后,像下图一律,就能够将探访过的商品消息列出,累似打了三个小广告。

图片 4

如此,完成。

至于JavaScript  cookie 跨域访谈之广告推广
的相干文化就给大家介绍这么多,希望对大家有所扶助!

你也许感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图