在上一篇《说一说javascript跨域和jsonp》中，利用JSONP进行了跨域的数据访问，利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告。

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

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

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

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

有些是用iframe实现，因为页面链接起来也方便，页面也能作起来方便些

下面主要是用跨域的脚本进行简单的实现。

其实都差不多，前者是跨域服务返回html，后者是返回JS。

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

问题来了。

A网页所在的站点和某东某宝的站点肯定是独立的两个域名，在A网页中访问某东某宝的cookie是拿不到滴，因为不同源，那么在A网页中的本身去呈现商品信息是做不到而且也不合适。

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

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

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

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

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

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

demo架构：node.js+express

1.在跨域服务上，可以理解成某电商，提供了一个页面，用来输入商品信息，模拟访问过的东西，输入后保存到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之广告推广的更多相关文章

  1. 通过设置P3P头来实现跨域访问COOKIE

    通过设置P3P头来实现跨域访问COOKIE 实际工作中,类似这样的要求很多,比如说,我们有两个域名,我们想实现在一个域名登录后,能自动完成另一个域名的登录,也就是PASSPORT的功能. 我只写一个大 ...

  2. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  3. 在ASP.NET MVC3 中利用Jsonp跨域访问

    在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...

  4. PHP 通过设置P3P头来实现跨域访问COOKIE

    CentOS的系统(Linux 内核) 编辑HOST vi /etc/hosts 加入127.0.0.1 www.a.com127.0.0.1 www.b.com 首先:创建 a_setcookie. ...

  5. 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法

    单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value = "outerLogin", results = { @Result(na ...

  6. Javascript 跨域访问解决方案 总结

    在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问 ...

  7. 使用JSONP彻底解决Ajax跨域访问Cookie Session的方案

    最近做开发时要把图片文件放到另外一台服务器上(另外一个域名),因为这样分布式存放,网站打开速度会快很多.而我采用AJAX获取图片服务器上某用户的图片时遇到了问题,按照通常的方式无法获取信息,得到的Co ...

  8. javascript 跨域访问

    JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.因为同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象. 下表给出了相对 http://si ...

  9. (转)在ASP.NET MVC3 中利用Jsonp跨域访问

    原文地址:http://www.cnblogs.com/skm-blog/p/3431999.html 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用 ...

随机推荐

  1. javascript：逆波兰式表示法计算表达式结果

    逆波兰式表示法,是由栈做基础的表达式,举个例子: 5 1 2 + 4 * + 3 -  等价于   5 + ((1 + 2) * 4) - 3 原理:依次将5 1 2 压入栈中, 这时遇到了运算符 + ...

  2. .net 分布式架构之分布式缓存中间件

    开源git地址: http://git.oschina.net/chejiangyi/XXF.BaseService.DistributedCache 分布式缓存中间件  方便实现缓存的分布式,集群, ...

  3. CRL快速开发框架系列教程六(分布式缓存解决方案)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  4. 应该是Angular2的一个bug？

    为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具.配置实在让人 很是焦灼,就像asp.n ...

  5. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  6. 电信计费业务：预后融合OCS到底应该实扣还是虚扣?

    引入OCS的初衷之一是为了让计费系统能够参与到用户的通讯控制中来,也就是所谓的实时信控.用户在没有余额时,通讯就会被停止,不会造成"天价欠费 ",一方面保障用户的利益,一方面也保障 ...

  7. 【干货分享】流程DEMO-制度发文和干部任免

    流程名: 制度发文和干部任免  业务描述: 当员工在该出勤的工作日出勤但漏打卡时,于一周内填写补打卡申请.  流程相关文件: 流程包.xml  流程说明: 直接导入流程包文件,即可使用本流程  表单: ...

  8. SymmetricDS 快速和灵活的数据库复制

    开始谈谈开源的SymmetricDS,谈谈实际使用中,遇到的一些问题和解决办法.持续更新: SymmetricDS 快速和灵活的数据库复制 实际使用 和 埋过的坑 (一)知识篇 SymmetricDS ...

  9. CSS笔记

    初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...

  10. 三大框架SSH整合

    三大框架SSH整合 -------------------------------Spring整合Hibernate------------------------------- 一.为什么要整合Hi ...