En aplicaciones reales, el uso de dominio cruzado de los componentes de pronóstico meteorológico se puede implementar en el método anterior. Otro método de uso común es mostrar ciertos anuncios de comercio electrónico, que se desplazarán a través de los productos que ha visitado o los productos recomendados por recomendaciones relacionadas.
Por ejemplo, se muestran dos tipos de anuncios en cierta página web:
Los anuncios de Oriente han sido visitados y han agregado cosas relacionadas.
Los anuncios de Taobao son básicamente los mismos que la presentación.
Al visitar productos de Dong y Bao, la información se colocará en la cookie, y cuando se presente, se presentará de acuerdo con la información del producto en la cookie.
El problema está aquí.
El sitio donde se encuentra la página web A y el sitio de Dong y Taobao debe ser dos nombres de dominio independientes. No puede obtener las cookies de Dong y Taobao en la página web A, porque hay diferentes fuentes, así que
Es imposible e inapropiado presentar información del producto en la página web en sí.
Por supuesto, necesitamos presentar la información del producto a través de métodos de dominio cruzado. Los problemas que deben resolverse son:
1. El script generado por el servicio de dominio cruzado no puede obtener cookies, pero solo puede obtener cookies en servidores de dominio cruzado.
¿Por qué? , el script generado por el servicio de dominio cruzado es en última instancia que se ejecuta en la página web. La cookie a la que se accede en el script generado por el servicio de dominio cruzado solo puede ser la cookie del sitio donde se encuentra la página web, eso está mal.
2. Los gritos se pueden obtener en el fondo del servicio de dominio cruzado
La respuesta es sí. Mientras el navegador inicie una solicitud a un determinado nombre/dirección de dominio, traerá su cookie correspondiente.
Entonces, implementemos una demostración simple
Arquitectura de demostración: Node.js+Express
1. En los servicios de dominio cruzado, se puede entender como una compañía de comercio electrónico, proporcionar una página para ingresar información del producto, simular las cosas visitadas y luego guardarlas en la cookie después de la entrada.
página
El código es agregar un tiempo de vencimiento para guardar la entrada en la cookie y, por supuesto, un código simple es primero.
<! 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> producto 1 </span> <input id = "s1"> </div> <p> </p> <div> <div> producto 2 </span> <input id = "s2"> </div> <p> </p> <div> <div> <pan> <pan> <port inutin id = "s3"> </div> <p> </p> <div> <span> producto 4 </span> <input id = "S4"> </div> <p> </p> <div> <divirador ID = "b" type = "button" value = "saveCookie ();"> </div> <script> function saveincookie () {// total de la información del producto var eles1 = documento de metar. eles2 = document.getElementById ('s2'); var Eles3 = document.getElementById ('s3'); var Eles3 = document.getElementById ('s3'); var eles4 = document.getElementById ('s4'); // generar el parámetro var fecha = nueva fecha (); var que expira después de 24 horas expiressseconds = 3*24*3600*1000; date.settime (date.gettime ()+expiressseconds); // Establezca toda la información del producto en cookies document.cookie = 's1 ='+escudo (eles1.value)+"; expir ="+date.togmtString (); document.cookie = 's2 ='+escudo (eles2.value+"; expir es = "+date.togmtString (); document.cookie = 's3 ='+escudo (eles3.value)+"; expires = "+date.togmtString (); document.co Okie = 's4 ='+escapar (eles4.value)+"; expires ="+date.togmtString (); alert (document.cookie);} </script> </body> </html>2. En los servicios de dominio cruzado, escriba un código para generar scripts en el servidor. Al generar el script, decodifique y extraiga los datos de la cookie traídos por el navegador y luego los emplome en el script.
Aquí sacamos cookies a través del objeto de solicitud. Los métodos de otras plataformas pueden ser diferentes, pero los principios son los mismos, y el navegador los traerá allí.
router.get ('/ad', function (req, res) {// divide una cadena js y complete la salida de la etiqueta html a la página html printcookies (req.cookies); var s = 'document.write (/' <<Div style = "Color de fondo: rojo; width: 10rem; altura: 10rem"> anuncio de producto '; Cadena para (var p en 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 ('******* WOOKIES *******'); para (var p en cookies) {console.log (P + '' + + unescape (cookies [p]));} console.log ('****************');}3. Realice solicitudes de script para servicios de dominio cruzado en la página web de un sitio web local.
Entre ellos, la dirección del script proporcionada en el servicio de dominio cruzado se hace referencia a través de la etiqueta de script.
<! Doctype html> <html> <fead> <title> test </title> <link rel = "stylesheet" href = "/stylesheets/style.css"> </head> <body> <script src = "http: // localhost: 3001/ad"> </script> <h1> información de vuelo </h1> de vuelo: http: MU532 </h4> <h4> Salida: Beijing </h4> <h4> Llegada: shanghai </h4> </body> </html>
Después de que la página se ejecuta, puede enumerar la información del producto visitado como la imagen a continuación, y está cansado de ella y está escribiendo un pequeño anuncio.
Entonces, está hecho.
Te presentaré mucho sobre el conocimiento relevante sobre la promoción publicitaria de acceso cruzado de las cookies de JavaScript, ¡y espero que te sea útil!