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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Vue动态实现评分效果
May 24 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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实现异步调用方法研究与分享
2011/10/27 PHP
浅析PHP开发规范
2018/02/05 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
pandas的qcut()方法详解
2019/07/06 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python如何实现复制目录到指定目录
2020/02/13 Python
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
初中英语课后反思
2014/04/25 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
城管个人总结
2015/02/28 职场文书
综合素质自我评价评语
2015/03/06 职场文书
医者仁心观后感
2015/06/17 职场文书