Belajar HTML5 Dan Messaging HTML5

Labkom99.com – Messaging HTML5 (API Messaging) dapat mengirimkan informasi antara halaman HTML5, dan bahkan antara halaman dengan nama domain berbeda seperti http://www.labkom99.com dan https: // www.google.com.

Mengirim Pesan Messaging HTML5

Untuk mengirim informasi dari satu halaman ke halaman lainnya, halaman yang mengirimkan informasi harus memiliki jendela yang mereferensikan halaman lain. Kemudian halaman yang mengirimkan informasi dapat memanggil postMessage() metode pada objek jendela halaman yang menerima informasi tersebut .

Berikut ini adalah contoh pengiriman pesan dari halaman saat ini ke halaman lain, di mana halaman lain ditampilkan menggunakan iframe.

var message = "Contoh mengirim pesan。";
var origin  = "http://www.labkom99.com";
 
var theIframe = document.getElementById("theIframe");
 
theIframe.contentWindow.postMessage(message, origin);  

Nilai postMessage() parameter yang diteruskan dalam metode origin harus sesuai dengan nama domain dari halaman yang dimuat di iframe. Jika nama domain tidak cocok, Anda tidak akan mendapatkan hasil yang benar. Selain itu, Anda tidak perlu mengisi alamat URL halaman secara lengkap, cukup isi nama domainnya, misalnya: http: //localhost atau http://www.labkom99.com.

Menerima Pesan Messaging HTML5

Untuk memantau informasi di halaman, Anda perlu mengatur fungsi onmessage untuk pemrosesan waktu pada objek jendelanya sendiri. Berikut ini contohnya, ini dapat berfungsi di browser Firefox dan Chrome:

window.onmessage = function(event) {
    document.getElementById("show").innerHTML =
            "Message Received: " + event.data
          + " from: " + event.origin;
};   

Dalam contoh ini, sebuah fungsi onmessage diatur pada objek jendela. Dalam fungsinya, kode memilih show elemen HTML dengan id, dan mengatur teks “Message Received:” dan informasi yang diterima pada elemen ini. Kode di atas adalah bagian dari kode js yang digunakan di halaman informasi penerimaan iframe.

Di browser Internet Explorer 9, Anda perlu menggunakan metode berikut untuk memantau informasi:

window.attachEvent("onmessage", function(event) {
    document.getElementById("show").innerHTML =
            "Message Received: " + event.data
          + " from: " + event.origin;
});       

Agar kompatibel dengan browser, Anda dapat menulis dua kode di atas pada halaman yang menerima informasi. Mereka tidak akan saling bertentangan.

Event Objek event menerima tiga properti berikut:

• data
• origin
• source

data Atribut berisi informasi yang dikirim dari halaman pengiriman.

Origin Atribut berisi nama domain halaman yang mengirimkan informasi.

Source Atribut berisi referensi ke objek jendela yang mengirimkan halaman informasi. Referensi ke objek jendela ini dapat digunakan untuk mengirim informasi kembali ke halaman pesan. postMessage() Metode dapat digunakan untuk mengirim kembali informasi. Berikut ini contohnya:

window.onmessage = function(event) {
    event.source.postMessage(
       "Thank you for the message",
       event.origin
    );
}              

Kirim Data JSON

API Messaging HTML5 hanya memungkinkan untuk mengirim pesan string. Jika Anda perlu mengirim objek javascript, Anda perlu menggunakan JSON.stringify() metode untuk mengubahnya menjadi string JSON. Dan kemudian menggunakan JSON.parse() metode untuk mengubahnya menjadi objek javascript di halaman penerima. Berikut ini contohnya:

var theObject = { property1 : "hello", property2 : "world" };
var message = JSON.stringify(theObject);
var origin  = "http://www.htmleaf.com";
 
var theIframe = document.getElementById("theIframe");
 
theIframe.contentWindow.postMessage(message, origin); 

Gunakan metode berikut pada halaman penerima untuk mengubah string JSON menjadi objek javascript.

window.onmessage = function(event) {
    var theObject = JSON.parse(event.data);
}