Dev Language/JAVASCRIPT

타 도메인간 IFRMAE 스크립트 호출

타카스 류지 2023. 5. 2. 11:22


■ 부모 기본 onload 설정
window.onload = function(){
        window.addEventListener('message', function(e) {
            console.log("parent message");
            console.log(e.data);
            console.log("e.origin : " +e.origin);
            
            if(e.data.childData === ' test data'){
                alert("iframe in data");
            }
        });
        
    }

■ 부모에서 iframe 메세지 전송
  var iframe = document.getElementById('child_iframe').contentWindow;
    iframe.postMessage({parentData : 'test parent data'}, "*");
        


■ 자식 기본 onload 설정
window.onload = function(){
        window.addEventListener('message', function(e) {
            console.log("child message");
            console.log(e.data);
            console.log("e.origin : " +e.origin);
            
            if(e.data.parentData === ' test parent data'){
                alert("parent in data");
            }
        });        
        
    }


■ 자식 iframe 에서 부모창으로 메세지 전송
  var iframe = document.getElementById('child_iframe').contentWindow;
    iframe.postMessage({parentData : 'test parent data'}, "*");
        
window.parent.postMessage({childData : 'test data'}, "*");