Pragmatic Programmer

Cross Document messaging 통신
다른 사이트 페이지끼리 통신 하기

[그림1] postMessage를 통한 크로스 사이트 통신

 '그림1'에서와 같이 페이지에서 iFrame로 임베이딩된 상태에서는 브라우저의 보안 정책으로 인해 자바스크립트를 통해 페이지간 통신을 할 수 없었다. 하지만 postMessage를 통해서 가능하게 되었다. 지원하는 브라우저는 아래 '그림2'에서와 같이 IE8에서부터 지원이 되므로 거의 대부분의 브라우저에서 지원된다고 보면 될 것이다.

[그림2] postMessage 브라우저 호환표

( http://caniuse.com/#feat=x-doc-messaging )

 이제 postMessage의 사용법에 대해서 알아 보자

데이터 송신하기

데이터를 송신하기 위해서는 window 객체의 postMessage 함수를 사용하면 된다

데이터 수신하기

데이터를 수신하는 측에서는 단순히 window 객체의 message 이벤트를 구현하면 된다

이제 이 코드를 가지고 아래 예제 코드로 활용법을 보도록 하자.

Syntax

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

A reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open, or by named or numeric index on window.frames.

message

Data to be sent to the other window.

targetOrigin

Specifies what the origin of otherWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if postMessage were used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.

transfer [Optional]

Is a sequence of Transferable objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no more usable on the sending side.

CSS Transition를 이용한 버튼 애니메이션 효과

 HTML5가 나오면서 CSS로 애니메이션을 할 수 있는 방법이 나오게 되었다. 이전에는 Javascript로 구현해야 하였기에 많은 CPU와 복잡한 로직으로 되어야 했지만 CSS의 Taansition을 통해 그나마 쉽게 컨트롤 할 수 있게 되었다. 이와 관련해서 여러가지 예제와 샘플들이 있지만 아래와 같이 버튼에 대해서 효과를 주는 간단한 CSS를 소개해 주고자 한다.

위 표현은 아래 코드를 통해서 나타낸다.

 HTML 5의 CSS3 Transition에 가장 잘 표현한 사이트가 있으니 여기에서 확인해 보고 경이로움을 같이 공유하였으면 합니다.

http://www.clicktorelease.com/code/css3dclouds/

그리고 어린이 도서와 같은 팝업북 같은 느낌의 사이트

http://www.creativesandbox.com/guidebook - 강추