Cara menggunakan postMessage untuk melaksanakan permintaan merentas domain Ajax dalam kemahiran tutorial HTML5

Cara menggunakan postMessage untuk melaksanakan permintaan merentas domain Ajax dalam kemahiran tutorial HTML5_html5

WBOY

Lepaskan： 2016-05-16 15:51:55

asal

1569 orang telah melayarinya

Disebabkan sekatan dasar asal yang sama, Javascript mempunyai masalah komunikasi merentas domain yang biasa termasuk komunikasi antara iframe dan induk, dsb.

Beberapa penyelesaian biasa:

(1) document.domain iframe;
(2) Buat skrip secara dinamik;
(3) iframe location.hash;

Saya tidak akan menerangkan butiran tentang kaedah ini di sini. Apa yang direkodkan ialah tetingkap HTML5.postMessage.
postMessage serasi dengan IE8, Firefox, Opera, Safari dan Chrome.

Dua pelayan asing diperlukan untuk ujian Sudah tentu, pelayan tempatan dan dalam talian juga boleh digunakan sebagai dua pelayan asing.
Jika anda menggunakan phonegap untuk membangunkan, anda boleh memasang fail permintaan pada klien, dan kemudian meminta pemprosesan data pelayan secara dinamik untuk mendapatkan dan memaparkan data. Dengan cara ini, sebarang bahasa dan kaedah pembangunan web boleh digunakan untuk membangunkan bahagian belakang yang diperlukan oleh Phonegap App.

1. Penggunaan postMessage
postMessage ialah API baharu yang diperkenalkan oleh HTML5 untuk menyelesaikan masalah merentas domain js, membenarkan berbilang iframe/tetingkap komunikasi merentas domain.

Andaikan strukturnya adalah seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan

test.html"pembungkus">
postMessage (cross-domain)
untuk=
"mesej">Hantar mesej ke iframe:
"teks" nama=
"mesej" nilai="anak" id="mesej"/> "serahkan"/>
Maklumat daripada iframe sasaran:
"ujian">Belum ada maklumat
"iframe" </li><li> src="http://xiebiji.com/works/postmessage/iframe.html"> </li> <li class="alt">
iframe.html
Kod JavaScriptSalin kandungan ke papan keratan

iframe menunjuk ke xiebiji.com
untuk="mesej">Hantar mesej ke tetingkap induk: < / label>
"teks" nama="mesej" nilai="ayah" id="mesej"/>
"serahkan"/>

"ujian"
>Tiada maklumat lagi.
Berikut ialah kod Javascript (menghantar data) dalam test.html: var win = document.getElementById("iframe" ).contentWindow;document.querySelector('form').onsubmit=fungsi(e){ win.postMessage(document.getElementById("mesej"
).nilai,"*"); jika
(e.preventDefault) e.preventDefault();
e.returnValue = palsu
; }
Kod kunci hanyalah satu ayat:

Kod JavaScript

Salin kandungan ke papan keratan

win.postMessage(document.getElementById(

"mesej"

"*"); PostMessage ialah kaedah objek komunikasi, jadi untuk berkomunikasi dengan iframe, objek iframe memanggil kaedah postMessage. postMessage mempunyai dua parameter, satu daripadanya sangat diperlukan. Parameter pertama ialah data yang akan dihantar, dan parameter kedua ialah domain yang membenarkan komunikasi "*" bermakna domain yang diakses tidak dinilai, yang boleh difahami sebagai membenarkan komunikasi dalam semua domain. Kemudian terdapat kod dalam iframe.html yang mendengar untuk menerima data:

Kod JavaScript

Salin kandungan ke papan keratan

var

parentwin = window.parent;window.onmessage=

(e){ document.getElementById("test").innerHTML = e.origin
"katakan:" e. data; parentwin.postMessage('HI! Anda menghantar saya "' e.data
'" . ',"*");};
Ia sangat mudah, saya percaya anda akan memahaminya sepintas lalu. e.data mengandungi data yang dihantar, dan e.origin merujuk kepada domain sumber.

Kemudian iframe.html juga menghantar data respons ke test.html dan test.html menerima data tersebut. Jika kodnya serupa, saya tidak akan menyiarkan kod itu.

2. Permintaan merentas domain Ajax

Berdasarkan komunikasi merentas domain di atas, letakkan kod Ajax dalam fungsi pemprosesan onmessage dalam iframe. html, Hantar permintaan ke test.html menggunakan data yang diluluskan oleh postMessage sebagai parameter, dan kemudian hantar data yang dikembalikan ke test.html menggunakan postMessage. Dengan cara ini, permintaan Ajax merentas domain dilaksanakan. Ia sebenarnya satu perkara yang sangat mudah.

Siarkan kod sampel, tetapi ia tiada kaitan dengan kod di atas.
Kod JavaScriptSalin kandungan ke papan keratan
1. (fungsi(){ //Dapatkan tetingkap data merentas domain.onmessage = fungsi(e){
2. var url = "http://yangzebo.com/demo/noforget/test.php?msg=" e.data;
3. //Ajax var xhr = getXHR();
6. xhr.send(null);
7. function changeHandle(){//Pulangan pemprosesan
8. if(xhr.readyState == 4){
9. var parentwin = window.parent;
10. parentwin.postMessage(xhr.responseText,"*");//Menghantar data merentas domain
11. } }
12. fungsi getXHR(){//Dapatkan XMLHttpRequest
13. var xhr_temp; if(window.XMLHttpRequest){
14. xhr_temp = XMLHttpRequest();
15. } else if(window.ActiveXObject){
16. xhr_temp = ActiveXObject baharu("Microsoft.XMLHTTP");
18. }
19. kembalikan xhr_temp;
21. Dann geben Sie eine unansehnliche Demo.
  
  Wenn Sie an der Code-Anfrage interessiert sind, verwenden Sie bitte die Entwicklertools, um sie auszuprobieren. „zebo man“ wird aus der Datenbank gelesen und „my msg“ ist der Parameter der von sendAndReceive gesendeten Ajax-Anfrage .html an test.php, zurück an sendAndReceive.html über test.php und iframeforAjax.html.
  
  3. Tipps
  
  Sie müssen das ContentWindow des Iframes abrufen, um postMessage aufzurufen.
  
  postMessage muss nach dem Laden des Iframes aufgerufen werden, damit es normal ausgeführt werden kann. (Das hat lange gedauert)

Cara menggunakan postMessage untuk melaksanakan permintaan merentas domain Ajax dalam kemahiran tutorial HTML5_html5

Maklumat daripada iframe sasaran: