在上一篇《说一说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. 通过VMware的PowerCLI配置集群内指定主机的vMotion功能

    PowerCLI是VMware开发的基于微软(MSFT)的PowerShell的命令行管理vSphere的实现,因此在批量化操作方面CLI会减轻很多GUI环境下的繁琐重复劳作. 现有场景中有大量的物理 ...

  2. var和dynamic的区别

    1.var 1.均是声明动态类型的变量. 2.在编译阶段已经确定类型,在初始化的时候必须提供初始化的值. 3.无法作为方法参数类型,也无法作为返回值类型. 2.dynamic 1.均是声明动态类型的变 ...

  3. 基于SignalR的消息推送与二维码描登录实现

    1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...

  4. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  5. 最新的 cocoaPods 安装方法

    经过努力终于发现了最新的 解决cocoaPods安装的办法: taobao Gems 源已停止维护,现由 ruby-china 提供镜像服务 第一步:安装rvm, 不管需不需要升级ruby,rvm可以 ...

  6. Android Studio分类整理res/Layout中的布局文件(创建子目录)

    res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...

  7. 查看mac中磁盘空间占用情况

    今天发现磁盘空间不够了,首先要找到那些文件夹占用了磁盘空间. du命令很好使 du -c -d 1 -m | sort -n -c 显示当前文件夹总计占用空间 -d 1 层级为1,即只显示当前目录下一 ...

  8. Mysql - 增删改

    因为项目原因, mysql用了两年了, 但是一直都未曾去总结过. 最近也是领导让总结项目, 才想起把mysql的使用小结一下. 一. Create 1. 单条插入, sql格式: insert int ...

  9. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  10. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...