Penjelasan terperinci tentang penggunaan asas API Komunikasi dalam kemahiran tutorial HTML5

1. Komunikasi mesej silang dokumen
Komunikasi mesej merentas dokumen boleh memastikan komunikasi silang sumber yang selamat antara iframe, tab dan tetingkap. Ia mentakrifkan API postMessage sebagai cara standard untuk menghantar mesej. Sangat mudah untuk menggunakan postMessage untuk menghantar mesej Kodnya adalah seperti berikut:
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
Apabila menerima mesej, cuma klik pada halaman Tambah fungsi pengendalian acara. Apabila mesej tiba, sumber mesej diperiksa untuk menentukan sama ada untuk memproses mesej itu.
Acara mesej ialah acara DOM dengan data dan atribut asal. Atribut data ialah mesej sebenar yang dihantar oleh pengirim, dan atribut asal ialah sumber penghantaran.
API postMessage bukan sahaja mampu berkomunikasi antara dokumen asal yang sama, tetapi ia juga berguna apabila penyemak imbas tidak membenarkan komunikasi bukan asal. Disebabkan ketekalan dan kemudahan penggunaannya, postMessage juga disyorkan apabila berkomunikasi antara dokumen asal yang sama. API postMessage hendaklah sentiasa digunakan semasa berkomunikasi dalam persekitaran JavaScript, seperti semasa berkomunikasi dengan Pekerja Web HTML5.
1.1 Memahami keselamatan asal
HTML5 Rongguang memperkenalkan konsep asal untuk menjelaskan dan meningkatkan keselamatan domain. Asal ialah subset alamat yang digunakan untuk mewujudkan hubungan kepercayaan pada rangkaian. Sumber terdiri daripada peraturan (skema), hos (hos), dan port (pos).
Path tidak dipertimbangkan dalam konsep sumber.
HTML5 mentakrifkan siri sumber. Sumber muncul sebagai rentetan dalam API dan protokol.
Peraturan keselamatan PostMessage memastikan mesej tidak dihantar ke halaman sumber yang tidak diingini. Apabila menghantar mesej, ia adalah pengirim yang menentukan sumber penerima. Jika tetingkap yang digunakan oleh pengirim untuk memanggil postMessage tidak mempunyai asal tertentu (contohnya, pengguna melompat ke tapak lain), penyemak imbas tidak akan menghantar mesej.
Begitu juga, apabila menerima mesej, sumber pengirim juga disertakan sebagai sebahagian daripada mesej. Untuk mengelakkan pemalsuan, sumber mesej disediakan oleh penyemak imbas. Penerima boleh memutuskan mesej yang mana untuk diproses dan yang mana untuk diabaikan. Kami boleh menyimpan senarai putih dan memberitahu penyemak imbas untuk hanya memproses mesej daripada sumber yang dipercayai.
Sebaik-baiknya jangan pernah menilai rentetan daripada pihak ketiga. Selain itu, elakkan menggunakan kaedah eval untuk memproses rentetan dalaman aplikasi. JSON boleh digunakan melalui penghurai window.JSON atau json,.org.
1.2 Sokongan penyemak imbas untuk komunikasi mesej merentas dokumen
Pendekatan biasa adalah untuk mengesan sama ada atribut withCredentials wujud dalam objek XMLHttpRequest:

Kod JavaScriptSalin kandungan ke papan keratan

　var xhr = baharu XMLHttpRequest(); jika (jenis xhr.withCredentials === undefined) { //Tidak menyokong silang asal XMLHttpRequest } lain { //Menyokong silang- asal XMLHttpRequest }

1.3 Menggunakan API postMessage
Petua Antara muka MessageEvent yang ditakrifkan oleh HTML5 juga merupakan sebahagian daripada HTML5 WebSockets dan HTML5 WebWorkers. Fungsi komunikasi HTML5 menggunakan API yang sama untuk menerima mesej seperti antara muka MessageEvent. API komunikasi lain, seperti EventSource API dan Web Workers, juga menggunakan antara muka MessageEvent untuk menghantar mesej.
1.4 Cipta aplikasi menggunakan API postMessage
Hantar mesej
Anda boleh menghantar mesej dengan memanggil fungsi postMessage() dalam objek tetingkap halaman sasaran berikut:

Kod JavaScriptSalin kandungan ke papan keratan

window.postMessage("Hello, world", "porta"); >

Parameter pertama mengandungi data yang akan dihantar, dan parameter kedua ialah destinasi mesej. Untuk menghantar mesej kepada iframe, anda boleh memanggil postMessage dalam contentWindow iframe yang sepadan Kodnya adalah seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan

document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, dunia", "cha"); Mendengar acara mesej
Apabila menerima mesej, anda hanya perlu menambah pengendali acara pada halaman. Apabila mesej tiba, sumber mesej diperiksa untuk menentukan sama ada untuk memproses mesej itu.
Kod JavaScriptSalin kandungan ke papan keratan
1. window.postMessage("Hello, world", "porta"); >
Peristiwa mesej ialah peristiwa DOM dengan data dan atribut asal. Atribut data ialah mesej sebenar yang dihantar oleh pengirim, dan atribut asal ialah sumber penghantaran.
Sumber terdiri daripada peraturan (skim), hos (hos), dan port (port).
Contohnya: disebabkan peraturan yang berbeza (seperti https dan http), sumber halaman adalah berbeza.
Laluan tidak dipertimbangkan dalam konsep sumber. Sebagai contoh: bukan hanya laluan, ia adalah sumber yang sama.
Sumber muncul sebagai rentetan dalam API dan protokol.
Kod JavaScriptSalin kandungan ke papan keratan
1. var originWhiteList = ["porta", "permainan" , ""]; fungsi semakWhiteList(asal) { untuk (var i=0; ijika (asal === originWhiteList[i]) { kembali benar; } } kembali salah; } fungsi messageHandler(e) { if (semakWhiteList(e.origin)) { processMessage(e. data); } lain { //Abaikan mesej daripada sumber yang tidak diketahui } }
API postMessage boleh digunakan pada komunikasi asal yang sama dan bukan asal Memandangkan konsistensinya, postMessage juga disyorkan apabila berkomunikasi antara dokumen homolog.
2 XMLHttpRequest Level2
Sebagai versi XMLHttpRequest yang dipertingkatkan, XMLHttpRequest Level2 telah meningkatkan fungsinya dengan banyak. Tertumpu terutamanya pada dua aspek: (1) XMLHttpRequests Sumber silang sumber (perkongsian sumber silang asal) melaksanakan XMLHttpRequests silang asal.
Permintaan HTTP silang asal termasuk pengepala Asal untuk memberikan pelayan maklumat sumber permintaan HTTP. Pengepala dilindungi oleh penyemak imbas dan tidak boleh diubah suai oleh kod aplikasi. Pada asasnya, ia mempunyai kesan yang sama seperti atribut asal bagi peristiwa mesej dalam komunikasi mesej merentas dokumen.
Spesifikasi CORS memerlukan beberapa gelagat sensitif, seperti permintaan untuk sijil atau permintaan pra-penerbangan OPTIONS selain GET dan POST, mesti dihantar oleh penyemak imbas ke pelayan untuk menentukan sama ada tingkah laku ini boleh disokong dan kebenaran, yang bermaksud itu komunikasi yang berjaya mungkin perlu disokong oleh pelayan dengan keupayaan CORS.
2.2 Peristiwa Kemajuan
Salah satu peningkatan API yang paling penting dalam versi baharu XMLHttpRequest ialah penambahan respons kepada kemajuan.
XMLHttpRequest Level2 menggunakan nama Progress yang bermakna untuk menamakan acara kemajuan.

3 fungsi lanjutan3.1 Data berstruktur
Versi postMessage yang lebih awal hanya menyokong rentetan. Versi kemudian menyokong jenis data lain seperti objek JavaScript, canvas imageData dan fail. Disebabkan perbezaan dalam sokongan spesifikasi antara penyemak imbas yang berbeza, sokongan untuk jenis objek yang berbeza juga berbeza.

3.2 Framebusting
Teknologi framebusting boleh digunakan untuk memastikan kandungan tertentu tidak dimuatkan ke dalam jframe. Aplikasi ini mula-mula mengesan sama ada tetingkap yang berada di dalamnya adalah tetingkap paling luar (window.top Jika tidak, ia melompat keluar dari bingkai yang mengandunginya Kod adalah seperti berikut:

Kod JavaScript
Salin kandungan ke papan keratan
1. jika(tetingkap!=tetingkap.atas)
2. {
3. window.top.location=location;
4. }
3.3 Data binari
Penyemak imbas yang menyokong API binari baharu (seperti Tatasusunan Taip) boleh menggunakan XMLHttpRequest untuk menghantar data binari. Spesifikasi Tahap 2 menyokong panggilan kaedah send() untuk menghantar objek Blob dan ArrayBuffer
　
Kod XML/HTMLSalin kandungan ke papan keratan
1. var a = baharu Uint8Array([8,6,7,5,3, 0,9]); var xhr = baharu XMLHttpRequest(); ", benar); console.log(a); xhr.send(a.buffer);
XMLHttpRequest Tahap 2 juga mendedahkan data tindak balas binari. Tetapkan nilai atribut responseType kepada teks, dokumen, penampan tatasusunan atau gumpalan untuk mengawal jenis objek yang dikembalikan oleh atribut respons. Jika anda ingin melihat bait mentah yang terkandung dalam badan respons HTTP, anda perlu menetapkan nilai atribut responseTyper kepada arraybuffer atau blob.

Penjelasan terperinci tentang penggunaan asas API Komunikasi dalam kemahiran tutorial HTML5_html5