Getting Iframes to Communicate in Salesforce

April 29, 2015 Appirio

By Rohit Sharma

techbl

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

  1. 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.

  1. 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

  1. 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]

  1. 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]

Previous Article
A Quick Guide to Mobile Application Testing
A Quick Guide to Mobile Application Testing

By Neerav Patel Mobile app development takes more than just developers. A good Quality Assurance (QA) team ...

Next Article
Using Process Builder to Convert Contacts into Person Accounts
Using Process Builder to Convert Contacts into Person Accounts

by Taylor Pariseau When using Tasks with QuickCreate turned on, users only have the ability to create a new...