ad campaigns to access cookies across domains with JavaScript

In the previous article, "Talk about JavaScript cross-domain and JSONP", the use of JSONP for cross-domain data access, the use of JS's own cross-domain capabilities in the remote generation of HTML structure of the way to complete a small ad.

In practical applications, cross-domain use of weather forecasting components can be implemented in the way described above, another common is to display some e-commerce ads, the ads will scroll the products you have visited or related to the product you want to recommend.

For example, there are two types of ads displayed on a Web page:

An East advertisement, which shows something that has been visited, and has been boosted by something related

A treasure of advertising, basically the same way of presentation.

When accessing a product of a certain eastern treasure, the information is placed in a cookie and presented in accordance with the product information in the cookie.

Here's the problem.

A Web site and an east of a treasure site is definitely independent of the two domain name, in a Web page to access a certain East treasure cookie is not to be taken, because of different sources, then in a Web page itself to present the product information is not and is not suitable.

Of course, through the cross-domain way to present the product information, the problem that needs to be solved is:

1. Cookies are not available in scripts generated by cross-domain services and can only be obtained on cross-domain server server

Why? , the script generated by the cross-domain service is ultimately run on a Web page, and the cookie that is accessed in the script generated by the cross-domain service can only be a cookie on the site where the a page is located.

2. Cross-domain service background to get cookies

The answer is yes, as long as the browser initiates a request to a domain name/address, it will bring its corresponding cookie.

So, let's implement a simple demo.

Demo Architecture: Node.js+express

1. On a cross-domain service, it can be understood as an e-commerce, providing a page for entering commodity information, simulating what has been accessed, and then saving it into a cookie.

Page

The code is to put the input and an expiration time to save into the cookie, of course, the first simple coding.

<! DOCTYPE html>functionSaveincookie () {//All product Information                varEles1=document.getelementbyid (' s1 '); varEles2=document.getelementbyid (' s2 '); varEles3=document.getelementbyid (' S3 '); varEles4=document.getelementbyid (' S4 '); //parameters that expire after 24 hours are generated                varDate=NewDate (); varexpiresmseconds=3*24*3600*1000; Date.settime (Date.gettime ()+expiresmseconds); //All product information is set in a cookieDocument.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>
2. On a cross-domain service, write the code for the server-side generated script, and when the script is generated, decode the data in the cookie that came with the browser and then spell it out into the script.
Here is the request object to remove the cookie, the other platform may not be the same way, but the principle is the same, the browser will bring it over.
Router.get ('/ad ',function(req, res) {//stitching up a JS string to finish outputting HTML markup to the HTML pageprintcookies (req.cookies); vars = ' document.write (\ ' <div style= ' background-color:red;width:10rem;height:10rem ' > Merchandise ads '; //take out all the items in the cookie and spell it into the script string     for(varPinchreq.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 ();});functionprintcookies (cookies) {Console.log (' ******cookies****** ');  for(varPinchcookies) {Console.log (P+ ' = ' +unescape (cookies[p])); } console.log (‘*******************‘);}
3. Script requests for cross-domain Services in a Web page of the local Web site.
Where scripts are referenced across Domain Services through the script tag.
<!DOCTYPE HTML><HTML>    <Head>        <title>Test</title>        <Linkrel= "stylesheet"href= "/stylesheets/style.css"></Head>    <Body>         <script  src= "Http://localhost:3001/ad"></ Script >         <H1>Flight information</H1>        <h4>Flight number: MU532</h4>        <h4>Departure: Beijing</h4>        <h4>Arrival: Shanghai</h4>    </Body></HTML>
After the page runs, like, you can have access to the product information listed, tired of playing a small ad.
So, done.
ad campaigns to access cookies across domains with JavaScript