1 2 3 4 5 6 L

Page Header > Subtitle

HTML5에서 다른 frame의 문서에 속한 객체 접근 방법

 

오류상황

  • index.html
    <frameset frameborder="yes" rows="150px,*">
    	<frame frameborder="1" scrolling="auto" src="right_top.html" name="right_top" id="right_top">
    	<frame frameborder="1" scrolling="auto" src="right_bottom.html" name="right_bottom" id="right_bottom">
    </frameset>
  • right_top.html
<html>
    <head>
        <script lang="javascript">
             function set(msg){ 
                 var win = window.parent.right_bottom; 
                 win.document.getElementById('text').innerHTML = msg;
             }
        </script>
    </head>
    <body>
        <button onclick="set('call bottom');"/>
    </body>
</html>

 

오류 메시지

  • right_top.html 의 버튼 클릭시
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

오류 원인

  • 프레임 셋이나 아이프레임(iframe)의 도메인이나 프로토콜 또는 접속 포트가 다른 경우 다른 프레임의 엘레멘트를 바로 끌어 올 수는 없다.
  • 로컬에서 확인 시에 file:/// 로 불러 올 경우 프로토콜이 null 이라서 프로토콜 정보가 없다며 위와 같은 에러를 뿜는다

해결 방법

postMessage 사용

  • 보내는 쪽 (right_top.html)
parent.postMessage('보낼메세지.JSON도 가능',"*")
  • 받는 쪽 (index.html)
function listener(event){		
	  document.getElementById('right_bottom').contentWindow.postMessage(event.data,"*");
}
if (window.addEventListener){
	  addEventListener("message", listener, false)
} else {
	  attachEvent("onmessage", listener)
}

JSPNP 사용

  • 서로 다른 사이트의 문서일 경우 JSONP를 이용한 통신으로 해결 할 수도잇다.

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

HTML/CSS

번호 제목 글쓴이 날짜 조회수
8 [CSS] nth-child (n번째 부터 n번째 까지 css적용) 미도어묵 11-24 742
7 유튜브 동영상 반응형으로 넣기 미도어묵 09-11 573
6 HTML5에서 다른 frame의 문서에 속한 객체 접근 방법 미도어묵 07-29 567
5 table등의 null 값에 특정값 삽입 css 미도어묵 12-29 288
4 CSS로 글자 자르기 - 한 줄, 여러 줄 관리자 05-22 288
3 CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 관리자 05-22 294
2 날짜와 시간 입력을 도와주는 데이트 피커 15가지 관리자 04-25 329
1 버튼디자인 및 오버효과를 간편하게 줄수있는 bttn.css 관리자 04-25 253