hujung hadapan web
tutorial js
Kuki JavaScript akses merentas domain pengiklanan promotion_javascript kemahiran
Kuki JavaScript akses merentas domain pengiklanan promotion_javascript kemahiran
Dalam aplikasi praktikal, penggunaan merentas domain komponen ramalan cuaca boleh dilaksanakan menggunakan kaedah di atas satu lagi kaedah yang biasa adalah untuk memaparkan iklan daripada syarikat e-dagang tertentu Iklan ini akan menatal produk yang telah anda lawati atau persatuan anda ingin mengesyorkan kepada produk anda.
Sebagai contoh, dua jenis iklan dipaparkan pada halaman web A:
Beberapa perkara yang dipaparkan dalam iklan Dongdong telah dikunjungi oleh Didi dan perkara yang berkaitan telah disyorkan
Iklan produk tertentu pada asasnya dipersembahkan dengan cara yang sama.
Apabila mengakses produk Dongmoubao, maklumat akan diletakkan dalam kuki, dan pembentangan akan berdasarkan maklumat produk dalam kuki.
Inilah masalahnya.
Tapak di mana halaman web A terletak dan tapak Dongbao mestilah dua nama domain bebas Apabila anda mengakses kuki Dongbao pada halaman web A, anda tidak boleh mendapatkannya kerana ia adalah daripada sumber yang berbeza, kemudian
Adalah mustahil dan tidak sesuai untuk membentangkan maklumat produk pada halaman web A itu sendiri.
Sudah tentu, maklumat produk mesti dibentangkan secara merentas domain Masalah yang perlu diselesaikan ialah:
1. Kuki tidak boleh diperoleh daripada skrip yang dihasilkan oleh perkhidmatan merentas domain Kuki hanya boleh diperoleh daripada pelayan merentas domain
Kenapa? , skrip yang dijana oleh perkhidmatan merentas domain akhirnya akan dijalankan pada halaman web A. Kuki yang diakses dalam skrip yang dijana oleh perkhidmatan merentas domain hanya boleh menjadi kuki tapak di mana halaman web A terletak, yang salah
2. Latar belakang perkhidmatan merentas domain boleh mendapatkan kuki
Jawapannya adalah ya selagi penyemak imbas membuat permintaan kepada nama/alamat domain tertentu, ia akan membawa kuki yang sepadan.
Jadi, mari kita laksanakan demo ringkas
Seni bina demo: node.js+express
1. Dalam perkhidmatan merentas domain, ia boleh difahami sebagai syarikat e-dagang yang menyediakan halaman untuk memasukkan maklumat produk, mensimulasikan perkara yang telah dilawati dan menyimpannya ke kuki selepas input.
Halaman
Kod ini adalah untuk menyimpan input serta masa tamat tempoh ke dalam kuki Sudah tentu, cukup kodkannya dahulu.
<!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><input id="s1">
</div>
<p></p>
<div>
<span>商品2</span><input id="s2">
</div>
<p></p>
<div>
<span>商品3</span><input id="s3">
</div>
<p></p>
<div>
<span>商品4</span><input id="s4">
</div>
<p></p>
<div>
<input id="b" type="button" value="保存进cookie" onclick="saveInCookie();">
</div>
<script>
function saveInCookie(){
//所有商品信息
var eleS1=document.getElementById('s1');
var eleS2=document.getElementById('s2');
var eleS3=document.getElementById('s3');
var eleS4=document.getElementById('s4');
//生成24小时后过期的参数
var date=new Date();
var expiresMSeconds=3*24*3600*1000;
date.setTime(date.getTime()+expiresMSeconds);
//商品信息全部设置到cookie中
document.cookie='s1='+escape(eleS1.value)+";expires="+date.toGMTString();
document.cookie='s2='+escape(eleS2.value)+";expires="+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. Pada perkhidmatan merentas domain, tulis sekeping kod untuk menjana skrip pada bahagian pelayan Apabila menjana skrip, nyahkod data dalam kuki yang dibawa oleh penyemak imbas dan masukkannya ke dalam skrip.
Di sini, kuki diambil melalui objek permintaan Kaedah ini mungkin berbeza pada platform lain, tetapi prinsipnya adalah sama, dan penyemak imbas akan membawanya.
router.get('/ad', function (req, res) {
//拼接一JS字符串，完成向html页面中输出html标记
printCookies(req.cookies);
var s = 'document.write(\'<div style="background-color:red;width:10rem;height:10rem">商品广告';
//将cookie中所有的商品取出，拼到脚本字符串中
for (var p in req.cookies) {
s += '<div>' + unescape(req.cookies[p]) + '</div>';
}
s+='</div>\');';
console.log(s);
res.setHeader('content-type', 'text/javascirpt;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. Buat permintaan skrip kepada perkhidmatan merentas domain dalam halaman web A tapak web tempatan.
Antaranya, alamat skrip yang disediakan pada perkhidmatan merentas domain dirujuk melalui tag skrip.
<!DOCTYPE html> <html> <head> <title>test</title> <link rel="stylesheet" href="/stylesheets/style.css"></head> <body> <script src="http://localhost:3001/ad"></script> <h1>航班信息</h1> <h4>航班号：MU532</h4> <h4>起飞：北京</h4> <h4>抵达：上海</h4> </body> </html>
Selepas halaman dijalankan, seperti yang ditunjukkan dalam gambar di bawah, maklumat produk yang dilawati akan disenaraikan, yang kelihatan seperti iklan kecil.
Itu sahaja, selesai.
Ini adalah semua pengetahuan yang berkaitan tentang akses merentas domain kuki JavaScript dan promosi pengiklanan saya harap ia akan membantu semua orang!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
TypeScript untuk pemula, Bahagian 2: Jenis Data Asas
Mar 19, 2025 am 09:10 AM
Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript
