임의의 이벤트 대상을 웹 브라우저의 컨트롤러에 출력하는 모니터 이벤트는 매우 편리하다
개시하다
이어 저번postMessage를 사용하여 브라우저 내 통신을 감시하는 조사에서 모니터 이벤트스[1]를 발견했다.
클라이언트(웹 브라우저)와 서버 간의 통신은 DeveloperTool 같은 네트워크에서 조사할 수 있지만postMessage 등을 사용하는 브라우저 내의 통신도 감시하기를 원한다.
모니터 이벤트를 사용하면 콘솔에서 브라우저 내의 통신 또는 임의의 DOM 이벤트를 모니터링할 수 있습니다.
의 목적
콘솔에서 웹 브라우저 내의 모든 이벤트를 모니터링하려고 합니다.
메서드
공식 참조[1]에 따르면 모니터 이벤트는 임의의 DOM에 대해 임의의 이벤트를 감시하고 이벤트가 발생할 때 이벤트 대상을 컨트롤러에 출력한다.
Chrome 대응
모니터 이벤트는 글로벌 함수입니다.
monitorEvents(<DOM>, <イベント名>);
ex.
window, $('a'), $('#msg')<이벤트 이름>: String or Aray(모두)ex.
'click', 'resize', 'scroll', 'keydown', 'message'예: 창 크기 이벤트 모니터링
monitorEvents(window, 'resize');
(참조[2])
예: 지정된 DOM의 클릭 이벤트 모니터링
monitorEvents(window, 'click');
(참조[3])
예: 지정된 DOM의 모든 이벤트 모니터링
monitorEvents($('#hoge'));
예: 브라우저의 postMessage 이벤트 모니터링
최초의 목적.이거 내가 하고 싶은 거야!
monitorEvents(window, 'message');
facebook.com의 도메인을 생성합니다.이때 페이스북 OAuth에 로그인하기 위해 실행FB.login()할 때postMessage를 사용하여 iframe와 어떤 통신을 할까...?모니터 이벤트를 사용하여 전송되는 정보와 호스트를 모니터링할 수 있습니다!참고로 이때 iframe에서 받은 정보는 다음과 같습니다.
(브라우저에서 다른 영역과 통신하는postMessage에 대한 참조저번
event: {
data: "_FB_fe44280d8cb=f264aee198&domain=mydomain.com&origin=https%3A%2F%2Fmydomain.com%2Ffe44280d8&relation=opener&frame=f1989e114c&signed_request=efy792iBaf10hurSrVapUIi9Ljcy20bX_eybHZZn8Js.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiwwwUNOY2QxMC0tQ0lZd2otdEthaFZibWZ1TE1jeUl1QVJOellTSXplTmJXcENWLXl3MW1UaFNPbkhkZ3Vjc3lnZHBMVURGd05yQV9RZHZVZjFienp0WlRjQlE0QzU2cUJTNHM1a1JmRUw3M1ZvbjBBZmFkVXpGMjRzQjBeeeZQejRfejFfT3dkdXpFRGJ0SnlLdWl5ek9DY1lVMWVvRUZpX1pqMGM2dXBTaEVsV2RvcUNuQzB2RE1rOEJSbkRva2ZhR3E3RWhDVVliWFFTejV3S2NDVk9YWkR4ZmEtZzdLQ3Y1UDM2SkJDRjlYaXAzMmZBS1lzZXRueUdkcW50RjlaMlRNbkVDdFM0TEh3UE9tdlBlMTY1Wkk2UE9xZ3lKMFlraWlEVHNvUFBoRkRHNWVaZ2JPeEp2a2FTRHNMTU1TSzBBUVpwOUdKQ05GTDMxWjJILU83ckJlWCIsImlzc3VlZF9hdCI6MTQxMzM2NDcwMiwidXNlcl9pZCI6Ijc1MTc1NTMwMTU1MzQxMSJ9&access_token=CAAJh14zkSI4BABJu4rZC22D1aR5ef0kZCfd9Ld1j8ItgpKVvaaxKr0WCh04zYIgdddddG8pWYBZCCKwiCpczSOkcZA52M4dpZC9KJJFVsXw2Us2xIvMvmQ7hmavNv3GoZA8OeJKklHRujaM6ZCLEpq7tksIHBC9QPGDE0aUEmltsKt6sF6p357Kb7WYQSiWWdroXSW3Pa8IGmk2mhMaZ228w&expires_in=6098&base_domain=&e2e=%7B%22submit_0%22%3A1413364702770%7D"
}
access_token.인터넷의 통신에서 찾을 수 없는 정보가 끊임없이 나타나고 있습니다 ♪총결산
모니터 이벤트를 사용하여 브라우저 내의 이벤트를 모니터링하면 디버깅에 도움이 됩니다.
이제야 알았으니 편한 김에 필기 투고하자.
[1] https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events
[2] https://developer.chrome.com/devtools/docs/commandline-api-files/monitor-resize.png
[3] https://plus.google.com/u/0/+UmarHansa/posts/jf4mCvrayk8
Reference
이 문제에 관하여(임의의 이벤트 대상을 웹 브라우저의 컨트롤러에 출력하는 모니터 이벤트는 매우 편리하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naoiwata/items/283f7b233316f35bbb64텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
