window.addEventListener로는 안되고 document.addEventListener여야 메시지 수신이 되는 이유를 모르겠습니다..

Question

안녕하십니까..리액트 네이티브 웹뷰와 NextJs웹의 메시지 통신간에 궁금증이 생겨 도움을 받고자 합니다.(아무리 검색하고 ai의 도움을 받아도 애매한 답변밖에 없어요 ㅠ)** 질문 웹뷰와 웹의 메시지 통신 간에 document.addEventListener('message', handleMessage) 로만 메시지 수신이 되고,window.addEventListener('message', handleMessage) 로는 수신이 되지 않는 이유를 모르겠습니다..이벤트 리스너로 등록함 함수를 EventListener 로 타입 캐스팅한게 원인이 아닐까 추측을 하고는 있습니다만..어차피 웹뷰에서 보낸 메시지는 window로 전달되는 걸로 알고 있는데.. 혹시 이유를 아시는 분이 계실까요한 수 배우겠습니다** 리액트 네이티브 웹뷰 관련 코드 webViewRef.current?.postMessage( JSON.stringify({type: 'load_contact_friends', data: contactList}), );** NextJs 웹 메시지 수신 관련코드 useEffect(() => { window.ReactNativeWebView?.postMessage('load_contact_friends') // React Native에서 보내는 메시지 받기 const handleMessage: EventListener = (event) => { const messageEvent = event as MessageEvent try { const data = JSON.parse(messageEvent.data) // 전달된 데이터 파싱 if (data.type === 'load_contact_friends') { console.log('Received Contacts:', data.data) // 데이터 처리 } } catch (error) { console.error('Error parsing message:', error) } } // message 이벤트 리스너 등록 document.addEventListener('message', handleMessage) // Clean up 이벤트 리스너 return () => { document.removeEventListener('message', handleMessage) } }, [])

dmm11 · Answer

혹시 안드로이드 개발을 하시는건가요?안드로이드와 iosrk 브라우저에 따라 message 이벤트를 가지고 있는 객체가 다르다고 하네요android => documentios => window

window.addEventListener로는 안되고 document.addEventListener여야 메시지 수신이 되는 이유를 모르겠습니다..

1개의 답변

#webview 목록