In actual applications, the cross-domain use of weather forecast components can be implemented in the above method. Another commonly used method is to display certain e-commerce advertisements, which will scroll through the products you have visited or the products recommended to you by Related Recommendations.
For example, two types of ads are displayed on a certain A web page:
The advertisements of the East have all been visited and have added related things.
Taobao’s advertisements are basically the same as presentation.
When visiting products from Dong and Bao, the information will be placed in the cookie, and when presented, it will be presented according to the product information in the cookie.
The problem is here.
The site where the web page A is located and the site of Dong and Taobao must be two independent domain names. You can’t get the cookies of Dong and Taobao on the web page A, because there are different sources, so
It is impossible and inappropriate to present product information in the A web page itself.
Of course, we need to present product information through cross-domain methods. The problems that need to be solved are:
1. The script generated by cross-domain service cannot obtain cookies, but can only obtain cookies on cross-domain servers.
Why? , the script generated by the cross-domain service is ultimately to run on the A web page. The cookie accessed in the script generated by the cross-domain service can only be the cookie of the site where the A web page is located, that's wrong.
2.Cookies can be obtained in the cross-domain service background
The answer is yes. As long as the browser initiates a request to a certain domain name/address, it will bring its corresponding cookie over.
So, let's implement a simple demo
demo architecture: node.js+express
1. In cross-domain services, it can be understood as an e-commerce company, providing a page to enter product information, simulate the visited things, and then save them into the cookie after input.
page
The code is to add an expiration time to save the input into the cookie, and of course, a simple code is first.
<!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>Playing</h1><div><span>Product 1</span><input id="s1"></div><p></p><div><span>Product 2</span><input id="s2"></div><p></p><div><span>Product 3</span><input id="s3"></div><p></p><div><span>Product 4</span><input id="s4"></div><p></p><div><input id="b" type="button" value="SaveInCookie();"></div><script>function saveInCookie(){//All product information var eleS1=document.getElementById('s1');var eleS2=document.getElementById('s2');var eleS3=document.getElementById('s3');var eleS3=document.getElementById('s3');var eleS4=document.getElementById('s4');// Generate the parameter var date=new Date(); var that expires after 24 hours expiresMSeconds=3*24*3600*1000;date.setTime(date.getTime()+expiresMSeconds);//Set all product information into cookies document.cookie='s1='+escape(eleS1.value)+";expir="+date.toGMTString();document.cookie='s2='+escape(eleS2.value)+";expir es="+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. On cross-domain services, write a piece of code to generate scripts on the server. When generating the script, decode and extract the data from the cookie brought by the browser and then splice it into the script.
Here we take out cookies through the request object. The methods of other platforms may be different, but the principles are the same, and the browser will bring them there.
router.get('/ad', function (req, res) {//Split a JS string and complete the output of the html tag to the html page printCookies(req.cookies);var s = 'document.write(/'<div style="background-color:red;width:10rem;height:10rem">Product Advertisement';//Pick out all the products in the cookie and splice them into the script string for (var p in req.cookies) {s += '<div>' + unescape(req.cookies[p]) + '</div>';}s+='</div>/');';console.log(s);res.setHeader('content-type', 'text/javascirct;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. Make script requests for cross-domain services in the A web page of the local website.
Among them, the address of the script provided on the cross-domain service is referenced through the script tag.
<!DOCTYPE html><html><head><title>test</title><link rel="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 is running, you can list the visited product information like the picture below, and you are tired of it and you are typing a small advertisement.
So, it's done.
I will introduce so much to you about the relevant knowledge about cross-domain access advertising promotion of JavaScript cookies, and I hope it will be helpful to you!