HTML5 스크립트
문서간 메시징
서로 다른 소스의 페이지 사이에서 정보를 교환하는 것입니다.
XDM이라고 부르기도 합니다(Xcross Document Messaging)
www.wrox.com페이지에 아이프레임으로 p2p.wrox.com페이지를 열어서 통신하기에는 보안을 유지하기가 어려운 일이었으나 이제는 보안은 그대로 유지하면서 사용하기 쉽게 XDM으로 표준화 했습니다.
postMessage() 메서드를 통해서 사용합니다.
전달
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");
수신
window.addEventListener(‘message’, function (e) {
if(e.origin == "http://www.wrox.com"){
//데이터 이용 코드
processMessage(e.data);
//옵션: 송신자에게 메시지 전송
e.source.postMessage("Received!", "http://p2p.wrox.com");
}
});
message이벤트에서는 아래와 같은 정보가 들어있습니다.
- data : postMessage()의 첫 번째 매개변수인 문자열 데이터입니다.
무조건 문자열만 보낼수 있으니 객체를 보내고싶다면 JSON.stringify()로 보내고 JSON.parse()로 객체화 해줍시다. - origin : 메시지를 보낸 문서의 소스
- source : 메시지를 보낸 문서의 window객체의 프록시
XDM은 다른 도메인에서 아이프레임으로 가져온 콘텐츠를 샌드박스할 때 대단히 유용하며, 이 방버은 매시업이나 네트워크 애플리케이션에서 매우 자주 쓰입니다.
외부 페이지에서 아이프레임과 통신할 때 XDM을 이용하면 보안이 용이합니다.
같은 도메인의 페이지사이에서도 사용할 수 있습니다.
네이티브 드래그 앤 드롭
HTML5에서는 거의 모든 요소를 드래그 할 수 있게 했습니다.
가장 흥미로운 것은 다른 프레임이나 다른 브라우저 창, 심지어 다른 애플리케이션으로 드래그 가능하다는 것입니다.
드래그 앤 드롭 이벤트
아래 이벤트 순서를 봅시다.
- dragstart
- drag
- dragend
마우스 버튼을 누른채 움직이면 dragstart 발생
그 후 드래그 하는동안 drag 발생
드래그를 끝내면 dragend 발생
그 후 유효한 드롭 타깃에 드래그하면 아래 이벤트가 발생합니다.
- dragenter
- dragover
- dragleave or drop
드래그 대상이 드롭타깃 위에 올라가는 즉시 dragenter 발생
dragenter이후 타깃의 경꼐 안에 있는 동안 dragover 발생
타깃에 드롭할 경우 dragleave 또는 drop 이벤트 발생
커스텀 드롭 타깃
드래그 대상을 잘못된 드롭타깃 위로 옮기면 원안에 선이 그어진 특별한 모양으로 바뀌며, 대상을 드롭할 수 없습니다.
모든요소가 타깃 이벤트를 지원하지만 드롭은 허용하지 않습니다.
즉 drop이벤트가 발생하지 않습니다.
dataTransfer 객체
dataTransfer를 도입해 드래그 앤 드롭 조작을 통해 데이터를 전달할 수 있게 했습니다.
event의 프로퍼티이며 드래그 대상에서 드롭 타깃으로 문자열 데이터를 전달합니다.
//TEXT
e.dataTransfer.setData("text", "someText");
var text = event.dataTransfer.getData("text");
//URL
e.dataTransfer.setData("URL", "http://www.wrox.com/");
var url = e.dataTransfer.getData("URL");
기존에는 text, URL만 있었으나 HTML5는 모든 마임타입을 받을 수 있게 바뀌었습니다.
드래그 가능성
draggable속성을 통해서 드래그 여부를 결정할 수 있습니다.
//드래그 막기
<img src="smile.gif" draggable="false">
//드래그 허용, 없을경우 기본 true
<div draggable="true">...</div>
dropEffect, effectAllowed
드래그 대상과 드롭 타깃에서 어떤 동작을 수행할지 판단하는 프로퍼티입니다.
드롭 이벤트에서 어떤 동작을 하는지 지정합니다.
- none : 이곳에 드롭 불가
- move : 드래그 대상을 드롭 타깃으로 옮김
- copy : 드래그 대상을 드롭 타깃으로 복사
- link : 드래그 대상이 URL이라면 드롭 타깃이 그리로 이동
위와같이 지정하면 드래그 시 각 값에따라 커서가 표시됩니다.
하지만 기능이 없으니 자동으로 복사, 이동, 연결되는건 아닙니다.
dropEffect프로퍼티를 사용하려면 드롭 타깃의 ondragenter이벤트 핸들러에 이에따른 동작을 지정해줍시다.
dropEffect프로퍼티는 effectAllowed도 지정해야 의미가 있습니다.
드래그 대상에 허용할 dropEffect를 지정합니다.
- uninitialized : 아무것도 지정안함
- none : 아무것도 허용안함
- copy : dropEffect copy만 허용
- link : dropEffect link만 허용
- move : dropEffect copy만 허용
- copyLink : dropEffect copy, link 허용
- copyMove : dropEffect copy, move만 허용
- linkMove : dropEffect link, move만 허용
- all : dropEffect값 모두 허용
ondragstart이벤트 핸들러에서 지정해야합니다.
예를 들면
사용자가 텍스트를 텍스트박스에서 div엘리먼트로 옮길 수 있도록 하려고 하는 경우
dropEffect, effectAllowed 모두 move를 지정해야 합니다.
div에서 드롭 이벤트의 기본동작은 아무것도 하지않는 것이기 때문입니다.
추가된 멤버
- addElement(element) 드래그 조작에 element추가
- clearData(format) 해당 형식으로 저장된 데이터 삭제
- setDragImage(element, x, y) 드래그 할 때 커서 아래에 표시할 이미지 정함
- types 현재 저장된 데이터 타입 목록
미디어 요소
HTML5는 플러그인 없이 오디오/비디오 재생하기 위하여 audio, video 두가지 미디어 요소를 도입했습니다.
//비디오
<video src="conference.mpg" id="myVideo">Video player not available.</video>
//오디오
<audio src="song.mp3" id="myAudio">Audio player</audio>
모든 브라우저가 모든 형식을 지원하지 않으므로 옵션으로 아래와 같지 지정할 수도 있습니다.
//비디오 옵션지정
<video id="myVideo">
<source src="conference.webm" type="video/webm; codecs='vp8, vorbis'">
<source src="conference.mpg">Video player not available.
</video>
source엘리먼트를 사용하여 타입별로 옵션을 넣어줬습니다.
매우 많은 기능을 지원하고 있으니 아래 주소를 참고하시면 좋습니다.
W3Schools - HTML5 Video
W3Schools - HTML5 Audio
마치며
HTML5는 이외에도 매우 많은 추가사항들이 있습니다.
그중 많이 쓰일것 같은부분 위주로 정리해 보았습니다.
다음 포스트에서는 자바스크립트 에러처리에 대해서 알아보겠습니다.