By Rohit Sharma
Simple as it may seem but to send data from Inline Visualforce page to service console‘s sidebar panel, it took us about three days to get this working. What we were trying to do is communicate between two iframes (which may or may not be on same domain.) Obviously, we wanted to do this without reloading the same page. Unfortunately, according to most browser’s default behavior, cross-domain communication is restricted. The following suggestion is a workaround with HTML5 Web Storage or Javascript EventListener. By the end you will be able to send information between multiple cross domains sections using an easy configuration.
Introduction to HTML5 Web Storage
Before HTML5, application data had to be stored in cookies, which also include server side requests. HTML5 introduced local storage, which web applications can use to store data locally on user’s browser. Unlike cookies, a large amount of data can be stored locally (at least 5 MB), without affecting site performance. Local storage is per domain. All pages, from one domain, can store and access the same data.
For better understanding about web storage reference following link : Localstorage
Introduction to Javascript EventListener
The addEventListener() method attaches an event handler to an element without overwriting existing one. We can add many event handlers of the same type to one element, i.e two “click” events. This feature is also applicable to DOM objects. For better readability, addEventListener() method separates JavaScript from HTML markup. This allows us to add event listeners even when you do not control the HTML markup.
[snippet caption=”Syntax”]
element.addEventListener(event, function, useCapture);
[/snippet]
Communicating methods between Iframes
Here we are explaining how to use local storage and event listener to communicate between Iframes:
Scenario 1 : Using Local Storage
- Set Local storage from source iframe :
[snippet caption=”LocalStorage Save”]
localStorage.setItem(‘key’, value);
[/snippet]
Note : Value can be string, number, JSON object or array.
- Bind Storage in destination iframe :
[snippet caption=”LocalStorage Read”]
$(window).bind(‘storage’, function (e) {
var storageValue = localStorage.getItem(“key”);
});
[/snippet]
Scenario 2 : Using Event Listener
- Fire event from source iframe:
Below method will send eventData object to every frame comes under top window.
[snippet caption=”Post Message”]
function sendLineItemToLog(){
var frames = top.frames;
var eventData = {
event: “Event Listener”,
data: {}
}
eventData.data.Subject = ‘This is Event Listener Test’;
for(var i = 0; i < frames.length; i++){
frames[i].postMessage(JSON.stringify(eventData), ‘*’);
}
return false;
}
[/snippet]
- Add Event Listener to destination frame:
[snippet caption=”Message EventListener”]
var eventData;
window.addEventListener(“message”, receiveCaseMessage, false);
function receiveCaseMessage(event){
if(event.origin === ‘DomainURL’){
try{
eventData = JSON.parse(event.data);
if(eventData.event === ‘Event Listener’){
//Action to perform
}
} catch(err){
console.log(err);
}
}
}
[/snippet]
