js 와 android 의 상호작용 실현
4085 단어 H5 개발
js 봉 인 된 창고 에서 봤 어 요.
window.MobileNavi && MobileNavi.configBtn(JSON.stringify(params));코드 구현 기능 은 title 스타일 을 설정 하 는 것 입 니 다. h5 를 통 해 안 드 로 이 드 native 코드, configBtn () 을 호출 합 니 다. Mobilenavi 는 각각 android 에 대응 하 는 방법 과 대상 입 니 다.
그렇다면 h5 와 안 드 로 이 드 는 어떻게 연 결 됩 니까?안 드 로 이 드 이쪽 이 어떻게 이 루어 지 는 지 볼 게 요.
원생 의 이쪽 은 주로 webView 로 관 리 를 통제 하고 js 다리 대상 등록 을 통 해 이 루어 집 니 다.
//
addJavascriptInterface(new MobileNavi(this));MobileNavi 클래스 는 configBtn 을 처리 하 는 것 입 니 다. configBtn 의 실현 방식 을 살 펴 보 겠 습 니 다.
@JavascriptInterface
public void configBtn(final String configParam) {
if (webUiBinder.getWebView().getNavigatorHolder() != null) {
webUiBinder.getWebView().post(new Runnable() {
@Override
public void run() {
webUiBinder.getWebView().getNavigatorHolder().configBtn(configParam);
}
});
}
}
네 이 티 브 에서 js 를 호출 하 는 방식 은 loadUrl () 과 evaluate Javascript () 방식, 예 를 들 어 위의 코드 와 같이 우리 가 js 에서 native 방법 을 호출 한 후에 다시 js 와 상호작용 을 할 때 laodUrl 방식 을 사용 하면 통과 해 야 합 니 다.
webView.loadUrl("javascript:" + jsCallBack + "('" + jsonStr + "');");방식 jsCallBack 리 셋 은 js 에 등록 하여 window 에서 맵 대상 을 생 성 합 니 다. 이름 은 jsCallBack 인 방법 으로 js 층 의 리 셋 을 처리 합 니 다.
js 와 native 통신 의 원리 에 대하 여 이곳 의 자 료 는 모두 비교적 모호 하 게 말한다.
iframe 원리
iframe 요 소 는 현재 웹 페이지 에 다른 웹 페이지 를 삽입 할 수 있 습 니 다.각 iframe 요 소 는 자신의 창 을 형성 하 는데 그것 이 바로 자신의 window 대상 이 있다.iframe 창 에 있 는 스 크 립 트 는 부모 창 과 하위 창 을 얻 을 수 있 습 니 다.그러나 같은 소스 의 경우 에 만 부모 창 과 하위 창 이 통신 할 수 있 습 니 다.도 메 인 을 넘 으 면 상대방 의 DOM 을 받 을 수 없습니다.예 를 들 어 부모 창 에서 아래 명령 을 실행 합 니 다.
iframe 창 이 같은 소스 가 아니라면 오류 가 발생 합 니 다.document.getElementById("myIFrame").contentWindow.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
위 명령 에서 부모 창 은 하위 창의 DOM 을 가 져 오 려 고 합 니 다. 도 메 인 을 넘 어서 오류 가 발생 했 습 니 다.
반대로 하위 창 에서 주 창 을 가 져 오 는 DOM 도 잘못 보고 합 니 다.
window.parent.document.body
//
이 경우
iframe 창 뿐만 아니 라 window.open 방법 으로 열 리 는 창 에 도 적 용 됩 니 다. 도 메 인 을 넘 으 면 부모 창 과 하위 창 간 에 통신 이 불가능 합 니 다.두 창 이 1 급 도 메 인 이름 이 같 고 2 급 도 메 인 이름 만 다르다 면 지난 절 에 소 개 된
document.domain 속성 을 설정 하면 동원 정책 을 피하 고 DOM 을 받 을 수 있다.우 리 는 이 방법 이 @ JavascriptInterface 주 해 를 추가 하여 클 라 이언 트 가 JS 를 호출 하 는 방법 을 비교 한 것 을 보 았 습 니 다. JS 가 클 라 이언 트 를 호출 하 는 방법 이 비교적 많 습 니 다. 간단하게 분류 하면 주입 맵 과 방법 으로 나 눌 수 있 습 니 다.주입 매 핑 은 주로 공식 적 으로 제공 하 는 것 이다.
addJavascriptInterface() 방법 은 자바 대상 과 JS 대상 을 매 핑 합 니 다.방법 납 치 는 JS 의 일부 시스템 방법 을 이용 하여 자바 의 이벤트 리 셋 이 존재 한 다음 에 리 셋 에서 사건 납 치 를 하여 클 라 이언 트 방법 을 집행 하 는 것 이다.주의: addJavascriptInterface 는 위험 합 니 다. hacker 는 역 컴 파일 을 통 해 Native 가 등 록 된 Js 대상 을 얻 은 다음 에 페이지 에서 자바 의 내 장 된 정적 클래스 를 반사 하여 민감 한 정보 와 파 괴 를 얻 을 수 있 습 니 다.
참고 자료:
1 https://blog.csdn.net/carson_ho/article/details/64904691
Android: 당신 이 원 하 는 WebView 와 JS 의 상호작용 방식 이 여기 있 습 니 다.
2 https://www.jianshu.com/p/3c94ae673e2a
Android: 이것 은 전면적 이 고 상세 한 Webview 사용 공략 입 니 다.
참고 자료
3 https://www.jianshu.com/p/fd61e8f4049e
Android WebView 전면 드라이 가이드
4 https://juejin.im/post/5a30f5195188253ee45b7048
js 와 안 드 로 이 드 의 상호작용, 그리고 WebView 의 구 덩이 를 깊이 학습 합 니 다.
5 https://juejin.im/post/5a806fba6fb9a06348535c9f
Android: WebView 와 Js 의 상호작용 기술 을 습득 할 때 가 되 었 습 니 다.
6 https://www.jianshu.com/p/61da3baae535
addJavascriptInterface 소스 코드 분석
7 https://blog.csdn.net/xiyan_19/article/details/49507413
Android WebView 에서 JAVA 와 JS 간 전달 (1)
8 https://blog.csdn.net/typename/article/details/40425275
Android 버 전 별 WebView
좋은 웹페이지 즐겨찾기
