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 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 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
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
QML用PathView实现轮播图
2020/06/03 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
计算机专业毕业生自荐信范文
2014/03/06 职场文书
高中生班主任评语
2014/04/25 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
主题教育活动总结
2014/05/05 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2015年防汛工作总结
2015/05/15 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
php+laravel 扫码二维码签到功能
2021/05/15 PHP
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL