[Salesforce]VisualForce 와 Aura 간의 데이터 전달법

init : function(component,event,helper){
	window.addEventListener("message", $A.getCallback(function(event) {    
            var vfOrigin = "https://orgname.visualforce.com";   
            if (event.origin !== vfOrigin) {
                return;
            }
            var eventResult = event.data;
    }), false);  
}

프로젝트를 진행하면서 배운 것을 정리해본다.

 

 

visualforce와 aura 간의 통신역할은 iframe이 담당한다.

 

1. AURA to VisualForce

AURA.cmp

<iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/VFPageName'}"/>

AURA.controller

handleSendToVF : function(component,event,helper){
	var message = new Object();
    var vfOrigin = "https://orgname.visualforce.com";
    var vfWindow = component.find("vfFrame").getElement().contentWindow;
    
    message.msg = 'sendSomthing';
    vfWindow.postMessage(message, vfOrigin);
}

message Object에는 추가사항을 더 담아서 VF로 전송할수 있음.

 

VF.js

let results;
window.addEventListener("message", function(event) {
    if (event.origin !== lexOrigin) {
        // Not the expected origin: reject message!
        return;
    }

    results = event.data;

}, false);

window에 이벤트를 걸어준다. results에 message에 대한 정보가 담긴다.

 

---

2. VF to AURA

VF.js

let lexOrigin = "https://orgname.lightning.force.com";
var message = 'send Somthing';

parent.postMessage(message, lexOrigin);

AURA.controller

  init : function(component,event,helper) {
        window.addEventListener("message", $A.getCallback(function(event) {    
            var vfOrigin = "https://orgname.visualforce.com";   
            if (event.origin !== vfOrigin) {
                return;
            }
            var eventResult = event.data;
 
        }), false);   
   }