在上一篇《说一说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. ASP.NET MVC5+EF6+EasyUI 后台管理系统（73）-微信公众平台开发-消息管理

    系列目录 前言 回顾上一节,我们熟悉的了解了消息的请求和响应,这一节我们来建立数据库的表,表的设计蛮复杂 你也可以按自己所分析的情形结构来建表 必须非常熟悉表的结果才能运用这张表,这表表的情形涵盖比较 ...

  2. .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  3. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  4. QQ空间动态爬虫

    作者:虚静 链接:https://zhuanlan.zhihu.com/p/24656161 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 先说明几件事: 题目的意 ...

  5. 微信开发笔记(accesstoken)

    access_token分两种 一种是公众号权限获取用,调用cgi-bin接口 ,此种token一个公众号同时只有一个,用这一个就够了. 服务器最好缓存. 用这个token前提是用户关注了此公众号. ...

  6. MongoDB常用操作--集合1

    1.创建集合有两种方式,显示创建和隐式创建 显示创建可以使用命令 db.createCollection("集合名称") 隐式创建可以使用命令 db.集合名称.insert({}) ...

  7. Android快乐贪吃蛇游戏实战项目开发教程-03虚拟方向键（二）绘制一个三角形

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.绘制三角形 在上一篇文章中,我们已经新建了虚拟方向键的自定义控件Direct ...

  8. NYOJ 954

    首先观察: 2! = 2×1                 = (2)10     = (10)2,        则第一个1是第2位,2!有1个质因数23! = 3×2×1             ...

  9. Openfire阶段实践总结

    从3月开始研究Openfire,其实就是要做一套IM系统,也正是这个原因才了解到Openfire.之前还真没想过有这么多的开源产品可以做IM,而且也没想到XMPP这个协议竟然如何强大.看来还是标准为先 ...

  10. 《高性能javascript》一书要点和延伸（下）

    第六章 快速响应的用户界面 本章开篇介绍了浏览器UI线程的概念,我也突然想到一个小例子,这是写css3动画的朋友都经常会碰到的一个问题: <head> <meta charset=& ...