Komunikasi Cross Domain iFrame

Penggunaan iFrame untuk menampilkan halaman lain merupakan salah satu solusi yang sering dipakai ketika ingin menampilkan halaman (page) lain. Halaman yang ingin ditampilkan bisa dari satu situs (website) atau bisa dari situs lain. Namun biasanya jika menampilkan halaman dalam satu situs sering menggunakan popup dengan metode parent-child.

Komunikasi antar halaman parent dan iFrame pun bisa dilakukan. Misalnya di halaman frame melakukan suatu aksi dan menghasilkan suatu nilai. Ketika kita ingin mengambil nilai tersebut maka kita bisa menggunakan JavaScript untuk melakukannya.

Sebagai contoh adalah sebagai berikut:

var iframe = document.getElementById('actContentToGet');
var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
var el = frameDoc.getElementById(elementID);

Namun kode di atas tidak berfungsi jika frame yang dipanggil adalah berbeda domain (cross-domain). Hal ini merupakan keamanan yang dipasang pada browser untuk menghindarkan pencurian data. Pesan error yang muncul adalah sebagai berikut:

Error: Permission denied to access property 'document'

Berbagai solusi telah saya lakukan untuk mengatasi masalah tersebut sehingga saya tetap bisa mengambil data dari halaman frame.

Salah satunya adalah dengan melakukan resizing frame. Resizing frame tersebut saya lakukan sebagai berikut:

function autoResize(id) {

var newheight;
var newwidth;

document.getElementById(id).height = (800) + "px";
document.getElementById(id).width = (600) + "px";
}

Namun masih tidak berhasil juga.

Alternatif kedua yang saya lakukan adalah dengan melakukan bypass terhadap security cross-domain. Saya membuat file xml yang saya tempatkan di path yang sama dengan web.config.

File crossdomain.xml yang saya buat adalah sebagai berikut.

<?xml version="1.0" ?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>

Namun alternatif kedua ini juga tidak berhasil.

Akhirnya di alternatif ketiga berhasil juga. Intinya adalah merubah juga halaman yang dipanggil dalam frame. Perubahan yang ada adalah mengirimkan data keluar dengan menambahkan security (situs mana saja yang boleh akses data lemparan tersebut).

Contoh simpelnya adalah sebagai berikut.

Di halaman yang ingin dijadikan frame:

setInterval(function() {
    parent.postMessage("Saya akan mengirim pesan tiap 1 detik","http://arif-febriyanto.com");
},1000);

Di halaman parent (misalnya yang diberikan security adalah http://arif-febriyanto.com).

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent,function(e) {
  console.log('Data yang ditangkap:  ',e.data);
},false);


Referensi:
http://softwareas.com/cross-domain-communication-with-iframes/
http://www.codeproject.com/Tips/585663/Communication-with-Cross-Domain-IFrame-A-Cross-Bro
http://davidwalsh.name/window-iframe