Tabel berikut memberikan hasil deteksi homolog relatif terhadap http://store.company.com/dir/page.html:
Untuk memecahkan masalah domain silang, kita dapat menggunakan metode berikut:
1. Domain silang melalui JSONP
Di JS, tidak mungkin untuk secara langsung meminta data pada domain yang berbeda menggunakan XMLHTTPREQUEST. Namun, tidak apa -apa untuk memperkenalkan file skrip JS di domain yang berbeda di halaman, dan JSONP menggunakan fitur ini untuk mencapainya.
Misalnya, ada halaman A.html, dan kode di dalamnya perlu menggunakan AJAX untuk mendapatkan data JSON pada domain yang berbeda. Dalam A.html itu saja:
Kami melihat bahwa ada parameter panggilan balik setelah alamat akuisisi data. Tentu saja, jika halaman alamat JSONP untuk mendapatkan data tidak dikendalikan oleh Anda, Anda harus beroperasi sesuai dengan format yang ditentukan dari pihak yang menyediakan data.
Karena diperkenalkan sebagai file JS, pengembalian http://example.com/data.php harus menjadi file JS yang dapat dieksekusi, sehingga kode PHP halaman ini mungkin terlihat seperti ini:
Hasil akhir dari output halaman itu adalah:
Jadi file JS yang diperoleh melalui http://example.com/data.php?callback=dosomething adalah fungsi dosomething yang kami tetapkan sebelumnya, dan parameternya adalah data JSON yang kami butuhkan, jadi kami mendapatkan domain lintas yang kami butuhkan data.
Dengan cara ini, prinsip JSONP sangat jelas. diteruskan sebagai parameter. Oleh karena itu, JSONP mengharuskan halaman sisi server untuk bekerja sama sesuai.
Setelah mengetahui prinsip domain silang JSONP, kita dapat menggunakan JS untuk secara dinamis menghasilkan tag skrip untuk operasi lintas domain, tanpa sengaja menulis tag skrip secara manual. Jika halaman Anda menggunakan jQuery, maka metode enkapsulasi dapat digunakan untuk melakukan operasi JSONP dengan sangat nyaman.
Prinsipnya sama, kecuali bahwa kita tidak perlu memasukkan tag skrip secara manual dan menentukan fungsi kembali. JQuery akan secara otomatis menghasilkan fungsi global untuk mengganti tanda tanya di Callback =?, dan kemudian secara otomatis akan menghancurkan data setelah mendapatkannya. Metode $ .getjson akan secara otomatis menentukan apakah itu domain silang. Memuat file JS.
2. Subdomain lintas dengan memodifikasi dokumen.domain
Browser memiliki kebijakan homolog, dan salah satu keterbatasannya adalah bahwa dalam metode pertama kami mengatakan bahwa dokumen dari sumber yang berbeda tidak dapat diminta melalui metode AJAX. Keterbatasan keduanya adalah bahwa interaksi JS tidak dapat dilakukan antara kerangka kerja domain yang berbeda di browser. Satu hal yang perlu diperhatikan adalah bahwa kerangka kerja yang berbeda (ayah dan anak atau anak laki -laki) dapat mendapatkan objek jendela satu sama lain, tetapi rasa sakitnya adalah Anda tidak dapat menggunakan sifat dan metode objek jendela yang diperoleh (metode postmessage di HTML5 ini merupakan pengecualian. Beberapa browser seperti IE6 juga dapat menggunakan beberapa atribut seperti Top dan Parent). Misalnya, ada halaman yang alamatnya http://www.example.com/a.html. Halaman ini memiliki domain yang berbeda dari kerangka kerja iframe di dalamnya, jadi kami tidak bisa mendapatkan sesuatu di iframe dengan menulis kode JS di halaman:
Pada saat ini, Document.domain bisa berguna. Atur ke nama domain yang sama. Tetapi harus dicatat bahwa pengaturan dokumen. Domain terbatas. Misalnya: Dokumen.Domain dokumen di abexample.com dapat diatur ke salah satu dari abexample.com, b.example.com, dan example.com, tetapi tidak dapat diatur ke CabExample.com, karena ini adalah seorang anak Dari domain domain saat ini, Anda tidak dapat mengaturnya ke baidu.com, karena domain utama tidak lagi sama.
Set Document.domain di halaman http://www.example.com/a.html:
Document.domain juga diatur dalam halaman http://example.com/b.html, dan ini juga diperlukan.
Dengan cara ini, kita dapat mengakses berbagai properti dan objek di iframe melalui JS.
Namun, jika Anda ingin secara langsung meminta halaman http://example.com/b.html melalui Ajax di halaman http://www.example.com/a.html, bahkan jika Anda mengatur dokumen yang sama. itu masih tidak berhasil. Jika Anda ingin berinteraksi dengan halaman -halaman subdomain yang berbeda melalui metode AJAX, selain menggunakan metode JSONP, Anda juga dapat menggunakan iframe tersembunyi untuk bertindak sebagai proxy. Prinsipnya adalah membiarkan iframe ini memuat halaman dengan domain yang sama dengan halaman target yang ingin Anda dapatkan data melalui AJAX, sehingga halaman di iframe ini dapat menggunakan AJAX untuk mendapatkan data yang Anda inginkan secara normal, dan kemudian melalui kami saya baru saja menyebutkan bahwa metode memodifikasi dokumen.domain memungkinkan kita untuk sepenuhnya mengontrol iframe ini melalui JS, sehingga kita dapat membiarkan iframe mengirim permintaan AJAX, dan kita juga dapat memperoleh data yang diterima.
3. Gunakan window.name to cross-domain
Objek jendela memiliki atribut nama, yang memiliki fitur: yaitu, selama siklus hidup jendela, semua halaman yang dimuat oleh jendela berbagi jendela dan tulis izin, window.name tetap ada di semua halaman yang dimuat oleh jendela, dan tidak akan diatur ulang karena pemuatan halaman baru.
Misalnya: Ada halaman A.html, yang berisi kode berikut:
Mari kita lihat kode halaman B.html:
3 detik setelah halaman A.html dimuat, melompat ke halaman B.html, dan hasilnya adalah:
Kita melihat bahwa nilai yang ditetapkan oleh halaman sebelumnya a.html ke window.name berhasil diperoleh pada halaman B.html. Jika semua halaman yang dimuat belum memodifikasi window.name setelah itu, nilai window.name yang diperoleh oleh semua halaman ini adalah nilai yang ditetapkan oleh halaman A.html. Tentu saja, jika perlu, salah satu halaman dapat memodifikasi nilai window.name. Perhatikan bahwa nilai jendela. Nama hanya dapat dalam bentuk string.
Dalam contoh di atas, halaman a.html dan b.html yang kami gunakan berada di domain yang sama, tetapi bahkan jika a.html dan b.html berada di domain yang berbeda, kesimpulan di atas juga berlaku, yang persis sama. Prinsip domain silang menggunakan window.name.
Mari kita lihat cara mendapatkan data di seluruh domain melalui window.name. Mari memberi contoh.
Misalnya, ada halaman www.example.com/a.html, dan Anda perlu menggunakan JS di halaman A.html untuk mendapatkan data di halaman lain yang terletak di domain yang berbeda www.cnblogs.com/data.html .
Kode di halaman data.html sangat sederhana, yaitu untuk mengatur nilai data yang ingin didapatkan oleh halaman A.html untuk jendela saat ini.name. Kode dalam data.html:
Jadi di halaman A.html, bagaimana kita memuat halaman data.html? Jelas, kami tidak dapat secara langsung memuat halaman data.html dengan mengubah window.lokasi di halaman A.html, karena kami ingin mendapatkan data di data.html bahkan jika halaman A.html tidak melompat. Jawabannya adalah menggunakan iframe tersembunyi di halaman A.html untuk bertindak sebagai perantara, dan iframe mendapatkan data data.html, dan kemudian A.html mendapatkan data yang diperoleh oleh iframe.
Jika iframe bertindak sebagai perantara ingin mendapatkan set data melalui window.name of Data.html, Anda hanya perlu mengatur SRC iframe ini ke www.cnblogs.com/data.html. Kemudian A.html ingin mendapatkan data yang diperoleh dengan iframe, yaitu, untuk mendapatkan nilai jendela iframe. Nama, Anda harus mengatur src iframe ini ke domain yang sama dengan halaman A.html, jika tidak sesuai dengan Sebelumnya dalam strategi asal yang sama, A.html tidak dapat mengakses properti Window.name di iframe. Ini adalah seluruh proses domain silang.
Lihatlah kode halaman A.html:
Kode di atas hanyalah kode demonstrasi prinsip paling sederhana. proxy. Ada juga banyak kode siap pakai serupa di internet.
Domain silang melalui window.name, itu saja.
4. Gunakan jendela yang baru diperkenalkan. Metode PostMessage di HTML5 untuk mentransfer data di seluruh domain
Metode Window.PostMessage (Pesan, Targetorigin) adalah fitur yang baru diperkenalkan dari HTML5. , Opera, dll. Semua mesin sudah mendukung metode Window.PostMessage.
Objek jendela yang memanggil metode postmessage mengacu pada objek jendela yang akan menerima pesan. Pesan yang diterima.
Objek jendela yang perlu menerima pesan dapat diperoleh dengan mendengarkan acara pesannya sendiri, dan konten pesan disimpan dalam atribut data objek acara.
Pesan pengiriman yang disebutkan di atas ke objek jendela lain sebenarnya mengacu pada situasi di mana halaman memiliki beberapa frame, karena setiap frame memiliki objek jendela. Saat membahas metode kedua, kami mengatakan bahwa objek jendela pihak lain dapat diperoleh di antara kerangka kerja dari domain yang berbeda, dan metode Window.PostMessage juga dapat digunakan. Berikut adalah contoh sederhana dengan dua halaman
Hasil yang kami dapatkan setelah menjalankan halaman:
Kami melihat halaman itu berhasil menerima pesan tersebut.
Cukup intuitif dan nyaman untuk menggunakan postmessage untuk mengirimkan data ke seluruh domain, tetapi kerugiannya adalah bahwa IE6 dan IE7 tidak mendukungnya, jadi apakah akan menggunakannya atau tidak tergantung pada kebutuhan aktual.