Dans les applications réelles, l'utilisation transversale des composants de prévision météorologique peut être mise en œuvre dans la méthode ci-dessus. Une autre méthode couramment utilisée consiste à afficher certaines publicités de commerce électronique, qui feront défiler les produits que vous avez visités ou les produits vous recommandés par des recommandations connexes.
Par exemple, deux types d'annonces sont affichés sur une certaine page Web:
Les publicités de l'Est ont toutes été visitées et ont ajouté des choses connexes.
Les publicités de Taobao sont fondamentalement les mêmes que la présentation.
Lors de la visite des produits de Dong et Bao, les informations seront placées dans le cookie et, lorsqu'elles seront présentées, elles seront présentées conformément aux informations du produit dans le cookie.
Le problème est là.
Le site où se trouve la page Web A et le site de Dong et Taobao doivent être deux noms de domaine indépendants. Vous ne pouvez pas obtenir les cookies de Dong et Taobao sur la page Web A, car il existe différentes sources, donc
Il est impossible et inapproprié de présenter des informations sur les produits dans la page Web A elle-même.
Bien sûr, nous devons présenter des informations sur les produits grâce à des méthodes de domaine croisé. Les problèmes qui doivent être résolus sont:
1. Le script généré par le service inter-domaine ne peut pas obtenir de cookies, mais ne peut obtenir que des cookies sur des serveurs inter-domaines.
Pourquoi? , le script généré par le service inter-domaine doit finalement s'exécuter sur la page Web A. Le cookie accessible dans le script généré par le service de domaine croisé ne peut être que le cookie du site où se trouve la page Web A, c'est mal.
2. Les Cookies peuvent être obtenus dans l'arrière-plan du service croisé
La réponse est oui. Tant que le navigateur initie une demande à un certain nom / adresse de domaine, il amènera son cookie correspondant.
Alors, implémentons une simple démo
Architecture de démonstration: Node.js + Express
1. Dans les services croisés, il peut être compris comme une entreprise de commerce électronique, fournissant une page pour saisir les informations du produit, simuler les choses visitées, puis les enregistrer dans le cookie après la contribution.
page
Le code consiste à ajouter un temps d'expiration pour enregistrer l'entrée dans le cookie, et bien sûr, un code simple est le premier.
<! Doctype html> <html> <éad- head> <itle> setcookie </ title> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <link rel = "Stylesheet" href = "/ stylesheets / style.css"> </ head> <pody> <h1> player </h1> <v> <span> Product 1 </span> <entrée id = "s1"> </ div> <p> </p> <v> <span> Product 2 </ span> <intring id = "s2"> </v> <p> </p> <p> <v> id = "s3"> </ div> <p> </p> <div> <span> Produit 4 </span> <entrée id = "s4"> </ div> <p> </p> <div> <entrée id = "b" type = "Button" value = "SaveIncookie ();"> </ div> <cript> funderyincookie () {// tout le produit var eles1 = document.gelement. eles2 = document.getElementById ('s2'); var eles3 = document.getElementById ('s3'); var eles3 = document.getElementById ('s3'); var eles4 = document.getElementyid ('s4'); // générer le paramètre var date = new Date (); var qui expire après 24 heures expiresmseconds = 3 * 24 * 3600 * 1000; date.settime (date.getTime () + ExpiresmSeconds); // définir toutes les informations du produit dans les 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) +"; exires = "+ date.togmtsstring (); document.co OKIE = 'S4 =' + Escape (eles4.Value) + "; Expires =" + Date.togMtString (); alert (document.cookie);} </cript> </body> </html>2. Sur les services croisés, écrivez un morceau de code pour générer des scripts sur le serveur. Lors de la génération du script, décodez et extraire les données du cookie apportées par le navigateur, puis les épisser dans le script.
Ici, nous supprimons les cookies via l'objet de demande. Les méthodes d'autres plateformes peuvent être différentes, mais les principes sont les mêmes, et le navigateur les y amènera.
Router.get ('/ ad', fonction (req, res) {// diviser une chaîne JS et compléter la sortie de la balise HTML à la page HTML PRINTCOOKIES (req.cookies); var s = 'document.write (/' <div style = "background-Color: Red; width: 10rem; height: 10rem"> product annonce " Script String pour (var p dans 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 ();}); fonction printcookies (cookies) {console.log ('****** cookies *******'); pour (var p dans les cookies) {console.log (p + '=' + Unescape (cookies [p]));} console.log ('***************');}3. Faites des demandes de script pour les services inter-domaines dans la page Web A du site Web local.
Parmi eux, l'adresse du script fournie sur le service de domaine croisé est référencée via la balise de script.
<! Doctype html> <html> <éad- head> <itle> test </ title> <link rel = "Stylesheet" href = "/ stylesheets / style.css"> </ head> <body> <script src = "http: // localhost: 3001 / ad"> </cript> <h1> Informations de vol </h1> MU532 </h4> <h4> Départ: Beijing </h4> <h4> Arrivée: Shanghai </h4> </odody> </html>
Une fois la page en cours d'exécution, vous pouvez répertorier les informations du produit visitées comme l'image ci-dessous, et vous en avez assez et vous tapez une petite publicité.
Donc, c'est fait.
Je vous présenterai tellement de choses sur les connaissances pertinentes sur la promotion publicitaire de l'accès croisé des cookies JavaScript, et j'espère que cela vous sera utile!