iOS (Swift 언어) WKWebView js 상호작용

3528 단어
WKWebView 는 애플 이 iOS 8 에서 새로 도입 한 프레임 워 크 로 WKWebView 의 js 상호작용 을 할 때:
1. WKWebView 호출 JS
WKWebView 의 evaluate JavaScript 방법 사용 하기: 예 를 들 어 js 에 name 방법 이 있다 면
js 호출 방법 은 간단 합 니 다.
webView.evaluateJavaScript("name1()"){ (result,error)
}

호출 후 패 킷 을 닫 고 돌아 올 것 입 니 다.
2. JS 로 WKWebView 호출
먼저 원본 에서 준 비 를 해 야 합 니 다. WKWebView 를 초기 화 할 때 다음 코드 설정 을 추가 해 야 합 니 다.
let webConfiguration = WKWebViewConfiguration() //     Web       
let pref = WKPreferences() //WKPreferences      web      。
pref.javaScriptEnabled = true
webConfiguration.preferences = pref
webConfiguration.userContentController = WKUserContentController()
//     JavaScript         web     
webConfiguration.userContentController.add(self, name:"appModel")

이 때 는 WKScriptMessage Handler 프로 토 콜 을 준수 해 야 합 니 다. WKScriptMessage Handler 프로 토 콜 은 하나 있 습 니 다.
func userContentController(_ userContentController: WKUserContentController, didReceive message:WKScriptMessage) {
} 방법, 이 방법 은 js 단 에서 WKWebView 를 호출 할 때의 반환 결과 입 니 다.다음은 js 단 호출 코드 입 니 다.
window.webkit.messageHandlers.appModel.postMessage(msg);
이상 은 js 와 원생 의 상호작용 의 목적 을 달성 할 수 있다.
질문
메모리 유출, vc 의 deinit 방법 에 만 추가
webView. configuration. userContentController. removeAllUserscripts () 를 사용 하면 됩 니 다.
문제
WK 웹 뷰 의 페이지 글꼴 이 웹 뷰 보다 작 을 때 도 있다.html 에 meta 설정 이 적 기 때 문 입 니 다.
h5 페이지 를 쓴 동 료 를 head 에 추가 하 는 해결 방법
name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
내 가 웹 뷰 를 WKWebView 로 바 꿀 때 프로젝트 가 실 행 된 지 오래 되 었 기 때문에 일부 웹 페이지 는 이 필드 가 있 고 일부 웹 페이지 는 없 었 다.그래서 제 가 WK WebView 에 js 방법 을 주 입 했 습 니 다.
WKUserscript 클래스 는 js 방법 을 주입 할 수 있 습 니 다.
WKUserscript 의 초기 화 방법 은 3 개의 인자 가 필요 합 니 다. 첫 번 째 는 js 스 크 립 트 의 소스 코드 입 니 다. 스 크 립 트 는 웹 페이지 에 주입 되 어야 하 는 시간 입 니 다. 마지막 으로 불 값 입 니 다. 지시 스 크 립 트 는 주 프레임 워 크 true 에 만 주입 해 야 하 는 지, 아니면 모든 프레임 워 크 false 에 주입 해 야 하 는 지 를 표시 합 니 다.
다음 js 스 크 립 트 소스 코드 주입
let jsSource = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'); document.getElementsByTagName('head')[0].appendChild(meta);"
//js      

let source = WKUserScript(source:jsSource, injectionTime:
WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)

주입 시간 은 불 러 온 후에 html 에 이 필드 가 있 는 지 모 르 기 때문에 우리 가 추가 한 js 를 기준 으로 해 야 합 니 다.
webConfiguration.userContentController.addUserScript(source)
웹 뷰 와 WKWebView 의 js 상호작용 방식 이 다 르 기 때문에 js 측 도 이에 따라 바 뀔 수 있 습 니 다. 그러면 좋 지 않 습 니 다. 한 동안 어떻게 해 야 js 단 코드 를 바 꾸 지 않 아 도 되 는 지 고려 했 습 니 다.다음은 내 가 생각 한 방법 이다.
WK WebView 에 js 코드 를 주입 하여 js 단 호출 방법 이 이전 과 같 으 면 됩 니 다.예 를 들 어:
예전 에 webView 때 js 상호작용 은 JScontext 를 사 용 했 습 니 다. 대상 을 주입 하고 방법 을 주 입 했 습 니 다. 그러면 js 에서 이 대상 을 직접 사용 하 는 방법 입 니 다. 만약 에 예전 에 주입 한 대상 이 app 이 라면 방법 은 jsFunc (str: String) 입 니 다. 제 가 한 단락 만 주입 하면 됩 니 다.
var app = {
   jsFunc : function(json)
    {
        window.webkit.messageHandlers.appModel.postMessage(json);
    }
};

이 js 코드 는 html 를 불 러 오기 전에 주입 해 야 하기 때문에:
WKUserScript(source: js 소스 코드 (위의), injection Time:
WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false)
테스트 해 봐. 완전 OK.

좋은 웹페이지 즐겨찾기