javascript] 외부 라이브러리 사용시 document 컨트롤

Question

안녕하세요. 클릭 감사합니다.모바일 웹에서 동영상 재생을 개발중입니다. 지금 하고자 하는 부분은모바일 웹 화면을 터치할 때마다 하단 컨트롤바(재생바와 앞으로10초 뒤로10초 플레이버튼 등등이 있는)를 show/hide하게 하고 싶습니다.모바일 터치 이벤트까지는 구현을 해서 터치할 때 이벤트는 잘 타고 있습니다. 그런데 문제는 이 다음입니다.div 구조를 보면 아래와 같고

이 div를 show/hide해주면 됩니다.재생에는 vimeo라는 라이브러리를 사용중이고 iframe에 src 를 넣어서 재생을 시켜주고 있습니다.

<%-- 영상 --%>

<%-- 컨트롤바 --%>

근데 영상이 재생되면 iframe하위에 document가 새로 생기는데 ... 모바일 화면을 터치해서 이벤트가 처음 발동되면 $(".player_area").hide(); 가 잘 되고 한 번 더 터치해서 $(".player_area").show(); 할 차례가 되면 $(".player_area") 이 없다고 null이 나옵니다.그리고 그때부터 document의 포커스가 iframe하위에 있는 document로 잡힙니다.저는 컨트롤바를 show해주려면 원래의 document로 포커스가 잡혀야 컨트롤이 가능한데... $(".player_area") 요소가 없다고 나와버리니까 다시 show를 해줄 수가 없습니다 ㅜㅠㅠ그리고 일단 hide가 된다음에는 터치이벤트가 먹지도 않아요..왜냐면 iframe하위에 새로생긴 document쪽에는 터치이벤트가 없으니까.......대체 이건 무슨 경우인가요 ㅠㅠ어떻게 하면 다시 원래의 document를 컨트롤 해줄 수 있을까요..??

하태연 · Accepted Answer

탐정님 말씀대로 postMessage 쓰시면 될 것 같습니다.targetOrigin 부분은 알맞게 쓰시면 됩니다.제가 샘플로 쓰고 있는 코드는 아래와 같습니다.▼ 호출 쪽targetWindow.postMessage( { func: 'functionName, param: 'parameter' }, '*' )▼ 받는 쪽window.addEventListener('message', function (e) { var data &#61; e.data; // 함수명 확인 후, 해당 함수를 실행 if (typeof (window[data.func] &#61;&#61; 'function')) { var execFunc &#61; new Function('return ' &#43; data.func)(); var param &#61; data.param; execFunc(param); } });

킁킁탐정 · Answer

iframe를 제거하면 가장 쉽게 해결됩니다.iframe과 통신하는 다음의 기능을 사용하세요.https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

하다11 · Answer

또 하나 배워갑니다 답변 감사드립니다!

javascript] 외부 라이브러리 사용시 document 컨트롤

3개의 답변

#document 목록