在上一篇《说一说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. 年度巨献-WPF项目开发过程中WPF小知识点汇总（原创+摘抄）

    WPF中Style的使用 Styel在英文中解释为”样式“,在Web开发中,css为层叠样式表,自从.net3.0推出WPF以来,WPF也有样式一说,通过设置样式,使其WPF控件外观更加美化同时减少了 ...

  2. CSS——关于z-index及层叠上下文（stacking context）

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  3. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  4. POJ1743 Musical Theme [后缀数组]

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 27539   Accepted: 9290 De ...

  5. Hyper-V上运行的Linux虚拟机验证是否安装了集成服务

    Hyper-V上运行的Linux虚拟机验证是否安装了集成服务 ps aux|grep "hv"root       311  0.0  0.0      0     0 ?     ...

  6. JavaScript单线程和浏览器事件循环简述

    JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...

  7. FreeBinary 格式说明

    说明 简称FB格式,是一个简单的二进制文件打包格式. 作用是FBX.unity.js等交换的一个中间格式. 由李剑英制定,易于读取,易于扩展 相应的代码可以用svn取得 SVN:http://code ...

  8. Marmoset Toolbag中的角色布光技巧 by Joe”EarthQuake”Wilson

    Sagat by Tim “spacemonkey” Appleby 有言在先 首先,我要感谢才华横溢的Tim“spacemonkey Appleby允许本教程中使用他那个极其NB的Sagat模型.不 ...

  9. Binder in Java

    Android在Native层实现了进程间的Binder通信,但是上层应用程序的开发及Framework的实现都是Java,用Java层再实现一次肯定是不合理的,Java可以通过JNI调用Native ...

  10. ABP源码分析三十八: ABP.Web.Api.OData

    如果对OData不熟悉的话可参考OData的初步认识一文以获取OData的一些初步知识. API.Odata 模块唯一用处就是提供了一个泛型版本的ODataController,实现了Controll ...