실제 응용 분야에서 일기 예보 구성 요소의 크로스 도메인 사용은 위의 방법으로 구현 될 수 있습니다. 일반적으로 사용되는 또 다른 방법은 특정 전자 상거래 광고를 표시하는 것입니다. 특정 전자 상거래 광고는 방문한 제품 또는 관련 권장 사항으로 귀하에게 권장되는 제품을 스크롤하게됩니다.
예를 들어, 특정 A 웹 페이지에 두 가지 유형의 광고가 표시됩니다.
동쪽의 광고는 모두 방문하여 관련된 것들을 추가했습니다.
Taobao의 광고는 기본적으로 프레젠테이션과 동일합니다.
Dong과 Bao의 제품을 방문 할 때 정보는 쿠키에 배치되며 발표되면 쿠키의 제품 정보에 따라 제시됩니다.
문제는 여기에 있습니다.
웹 페이지 A가있는 사이트와 Dong 및 Taobao 사이트는 두 개의 독립적 인 도메인 이름이어야합니다. 다른 출처가 있기 때문에 웹 페이지 A에서 Dong과 Taobao의 쿠키를 얻을 수 없습니다.
A 웹 페이지 자체에 제품 정보를 제시하는 것은 불가능하고 부적절합니다.
물론, 우리는 크로스 도메인 방법을 통해 제품 정보를 제시해야합니다. 해결해야 할 문제는 다음과 같습니다.
1. 크로스 도메인 서비스로 생성 된 스크립트는 쿠키를 얻을 수 없지만 크로스 도메인 서버에서만 쿠키를 얻을 수 있습니다.
왜? , 크로스 도메인 서비스에서 생성 된 스크립트는 궁극적으로 A 웹 페이지에서 실행됩니다. 크로스 도메인 서비스에서 생성 된 스크립트에서 액세스 한 쿠키는 웹 페이지가 위치한 사이트의 쿠키 일 수 있습니다.
2. 쿠키는 크로스 도메인 서비스 배경에서 얻을 수 있습니다
대답은 예입니다. 브라우저가 특정 도메인 이름/주소에 대한 요청을 시작하는 한 해당 쿠키를 가져옵니다.
따라서 간단한 데모를 구현합시다
데모 아키텍처 : node.js+express
1. 크로스 도메인 서비스에서는 전자 상거래 회사로 이해하여 제품 정보를 입력하고 방문한 물건을 시뮬레이션 한 다음 입력 후 쿠키에 저장하는 페이지를 제공합니다.
페이지
코드는 입력을 쿠키에 저장하기 위해 만료 시간을 추가하는 것입니다. 물론 간단한 코드가 먼저입니다.
<! 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> <입력 id = "s1"> </div> <p> </p> <div> <span> product 2 </span> <입력 id = "s2"> 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 = docum 24 시간 후에 만료되는 var expiresmseconds = 3*24*3600*1000; date.settime (date.gettime ()+ExpireSmseconds); // 쿠키로 모든 제품 정보를 설정 document.cookie = 's1 ='+Escape (eles1.value)+"; expir ="+date.togmtstring (); docum es = "+date.togmtstring (); docum okie = 's4 ='+Escape (eles4.value)+"; expires ="+date.togmtstring (); alert (document.cookie);} </script> </body> </html>2. 크로스 도메인 서비스에서 서버에서 스크립트를 생성하기 위해 코드를 작성하십시오. 스크립트를 생성 할 때 브라우저가 가져온 쿠키에서 데이터를 디코딩하고 추출한 다음 스크립트에 연결하십시오.
여기서 우리는 요청 객체를 통해 쿠키를 꺼냅니다. 다른 플랫폼의 방법은 다를 수 있지만 원칙은 동일하며 브라우저는이를 가져옵니다.
router.get ( '/ad', function (req, res) {// JS 문자열을 분할하고 HTML 태그의 출력을 HTML 페이지 printCookies (req.cookies)로 완성합니다. (req.cookies의 var p) {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 (쿠키) {console.log ( '****** 쿠키 *******'); for (var p in cookies) {console.log (p + '=' ' + Unescape (쿠키 [p]);} console.log ( '***************');}3. 지역 웹 사이트의 웹 페이지에서 크로스 도메인 서비스에 대한 스크립트 요청을 작성하십시오.
그중에서도 크로스 도메인 서비스에 제공된 스크립트의 주소는 스크립트 태그를 통해 참조됩니다.
<! docType html> <html> <head> <head> <title> test </title> <link rel = "stylesheet"href = "/stylesheets/style.css"> </head> <body> <script src = "http : // localhost : 3001/ad"> <h1> <h1> <h1> <h1> <h1> <h1> MU532 </h4> <h4> 출발 : 베이징 </h4> <h4> 도착 : 상하이 </h4> </body> </html>
페이지가 실행되면 아래 그림과 같은 방문 된 제품 정보를 나열 할 수 있으며 피곤하고 작은 광고를 입력하고 있습니다.
그래서 끝났습니다.
JavaScript 쿠키의 크로스 도메인 액세스 광고 홍보에 대한 관련 지식에 대해 많은 것을 소개하겠습니다. 도움이되기를 바랍니다.