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 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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 采集获取指定网址的内容
2010/01/05 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
PHP如何实现跨域
2016/05/30 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Flask之flask-session的具体使用
2018/07/26 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
初一新生军训方案
2014/05/22 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
护士个人年终总结
2015/02/13 职场文书
员工试用期工作总结
2019/06/20 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
总结高并发下Nginx性能如何优化
2021/11/01 Servers