Dalam aplikasi yang sebenarnya, penggunaan lintas-domain komponen ramalan cuaca dapat diimplementasikan dalam metode di atas. Metode lain yang umum digunakan adalah menampilkan iklan e-commerce tertentu, yang akan menggulir produk yang telah Anda kunjungi atau produk yang direkomendasikan kepada Anda dengan rekomendasi terkait.
Misalnya, dua jenis iklan ditampilkan pada halaman web tertentu:
Iklan Timur semuanya telah dikunjungi dan telah menambahkan hal -hal terkait.
Iklan Taobao pada dasarnya sama dengan presentasi.
Saat mengunjungi produk dari Dong dan Bao, informasi akan ditempatkan di cookie, dan ketika disajikan, itu akan disajikan sesuai dengan informasi produk dalam cookie.
Masalahnya ada di sini.
Situs tempat halaman web A berada dan situs Dong dan Taobao harus dua nama domain independen. Anda tidak bisa mendapatkan cookie Dong dan Taobao di halaman web A, karena ada sumber yang berbeda, jadi
Tidak mungkin dan tidak pantas untuk menyajikan informasi produk di halaman Web itu sendiri.
Tentu saja, kita perlu menyajikan informasi produk melalui metode lintas domain. Masalah yang perlu diselesaikan adalah:
1. Skrip yang dihasilkan oleh layanan lintas domain tidak dapat memperoleh cookie, tetapi hanya bisa mendapatkan cookie di server domain lintas.
Mengapa? , skrip yang dihasilkan oleh layanan lintas-domain pada akhirnya dijalankan di halaman web A. Cookie yang diakses dalam skrip yang dihasilkan oleh layanan lintas domain hanya bisa menjadi cookie dari situs di mana halaman web berada, itu salah.
2.Koki dapat diperoleh di latar belakang layanan lintas domain
Jawabannya adalah ya. Selama browser memulai permintaan ke nama/alamat domain tertentu, ia akan membawa cookie yang sesuai.
Jadi, mari kita terapkan demo sederhana
Arsitektur Demo: Node.js+Express
1. Dalam layanan lintas domain, dapat dipahami sebagai perusahaan e-commerce, menyediakan halaman untuk memasukkan informasi produk, mensimulasikan hal-hal yang dikunjungi, dan kemudian menyimpannya ke dalam cookie setelah input.
halaman
Kodenya adalah menambahkan waktu kedaluwarsa untuk menyimpan input ke dalam cookie, dan tentu saja, kode sederhana adalah yang pertama.
<!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> <van> <span> Produk 2 </span> <input id = "s2"> </div> <p> </p> <pan> <pan> Produk 3 </span> <Input ID = "S3"> </Div> <p> </p> </span> <Input = "S3"> </Div> <p> </p> </span> <Input = "S3"> </Div> <p> </p> </span> <input = "S3"> </Div> <p> </p> </span> <input = "S3"> </Div> <p> </p> </span> <Input = "S3"> </Div> <p> </p> </span> <Input = "S3"> </Div> <p> </p> <p> ID = "S4"> </Div> <p> </p> <div> <input id = "b" type = "Tombol" value = "saveIncookie ();"> </div> <script> function saveIncookie () {// semua informasi produk var eles1 = document.getElementById ('s1'); var eles2 = document.get.get.get.get.getById ('s1'); var eLes2 = document.get.get.get.get.get.getById ('); eles3 = document.geteLementById ('s3'); var eles3 = document.geteLementById ('s3'); var eles4 = document.geteLementById ('s4'); // menghasilkan parameter var tanggal = tanggal baru (); var yang kedaluwarsa setelah 24 jam kedaluwarsa Expiresmseconds = 3*24*3600*1000; date.settime (date.getTime ()+Expiresmseconds); // Atur semua informasi produk ke dalam cookie document.cookie = 's1 ='+Escape (eles1.value)+"; extir ="+date.togmtstring (); document.cookie = 's2 ='+Escape (eles2.value)+"; ext es = "+date.togmtString (); document.cookie = 's3 ='+Escape (eles3.value)+"; Expires = "+date.togmtString (); document.co okie = 's4 ='+Escape (eles4.value)+"; Expires ="+date.togmtString (); alert (document.cookie);} </script> </body> </html>2. Pada layanan lintas domain, tulis sepotong kode untuk menghasilkan skrip di server. Saat menghasilkan skrip, memecahkan kode dan ekstrak data dari cookie yang dibawa oleh browser dan kemudian menyambungkannya ke dalam skrip.
Di sini kami mengambil cookie melalui objek permintaan. Metode platform lain mungkin berbeda, tetapi prinsip -prinsipnya sama, dan browser akan membawanya ke sana.
router.get ('/ad', function (req, res) {// membagi string js dan lengkapi output tag html ke halaman html printcookies (req.cookies); var s = 'dokumen dan komplit (/' <div style = "latar belakang-color: red; lebar: 10rem; tinggi: 10rem: 10rem in cooke (/'<div style =" latar belakang: red; lebar: 10rem; tinggi: 10rem; string skrip untuk (var p dalam req.cookies) {s + = '<verv>' + unescape (req.cookies [p]) + '</div>';} s + = '</div>/'); '; console.log (s); res.setHeader (' tipe konten ', 'Teks/javascirct; charset = utf-8'); res.write (s); res.end ();}); function printcookies (cookie) {console.log ('****** cookies *******'); untuk (var p dalam cookie) {console.log (p + '=' unescape (cookie [p]));} console.log ('***************');}3. Buat permintaan skrip untuk layanan lintas domain di halaman web situs web lokal.
Di antara mereka, alamat skrip yang disediakan pada layanan lintas domain dirujuk melalui tag skrip.
<! Doctype html> <html> <head> <title> tes </ title> <link rel = "stylesheet" href = "/stylesheets/style.css"> </head> <body> <script src = "http: // localhost: 3001/ad"> </script> flightp: http: // localhost: 3001/ad "> </script> <h1> flight http: // localhost: 3001/ad"> </script> flights: http: http: ht/host: 3001/ad " MU532 </h4> <h4> Keberangkatan: Beijing </h4> <h4> Kedatangan: Shanghai </h4> </body> </html>
Setelah halaman berjalan, Anda dapat mencantumkan informasi produk yang dikunjungi seperti gambar di bawah ini, dan Anda bosan dan Anda mengetik iklan kecil.
Jadi, sudah selesai.
Saya akan memperkenalkan banyak hal kepada Anda tentang pengetahuan yang relevan tentang promosi iklan akses lintas domain dari cookie JavaScript, dan saya harap ini akan membantu Anda!