JS는 WKWebView의 그림을 대화식으로 클릭하고 예제를 미리 봅니다.

이 기사에서는 주로 WKWebView에서 사진을 대화형으로 클릭하여 미리보기 효과를 얻을 수 있는 JS를 소개합니다. 필요한 친구가 이를 참조하면 모든 사람에게 도움이 될 수 있습니다.

• Swift 4.0

• WKWebView

1. js 코드 삽입(핵심 사항)

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
  let jsGetImages =
    "function getImages(){" +
    "var objs = document.getElementsByTagName(\"img\");" +
    "var imgScr = '';" +
    "for(var i=0;i<objs.length;i++){" +
    "imgScr = imgScr + objs[i].src + &#39;+&#39;;" +
    "};" +
    "return imgScr;" +
    "};"
  webView.evaluateJavaScript(jsGetImages, completionHandler: nil)
  webView.evaluateJavaScript("getImages()") { (data, err) in
    let imageUrl:String = data as! String
    var urlArry = imageUrl.components(separatedBy: "+")
    urlArry.removeLast()
    self.imgUrlArray.addObjects(from: urlArry)
    for url in self.imgUrlArray{
      let photo = SKPhoto.photoWithImageURL(url as! String)
      photo.shouldCachePhotoURLImage = false // you can use image cache by true(NSCache)
      self.images.append(photo)
    }
  }
  var jsClickImage:String
  jsClickImage = 
    "function registerImageClickAction(){" +
    "var imgs=document.getElementsByTagName(&#39;img&#39;);" +
    "var length=imgs.length;" +
    "for(var i=0;i<length;i++){" +
    "img=imgs[i];" +
    "img.onclick=function(){" +
    "window.location.href=&#39;image-preview:&#39;+this.src}" +
    "}" +
    "}"
  webView.evaluateJavaScript(jsClickImage, completionHandler: nil)
  webView.evaluateJavaScript("registerImageClickAction()", completionHandler: nil)
}

2. SKPhotoBrowser 프레임워크를 사용하여 이미지 미리보기 기능 구현

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
  let requestString = navigationAction.request.url?.absoluteString
  print(requestString!)
  if (requestString?.hasPrefix("image-preview"))!{
    let imgUrl = NSString.init(string: requestString!).substring(from: "image-preview:".count )
    let index = imgUrlArray.index(of: imgUrl)
    let browser = SKPhotoBrowser(photos: images)
    browser.initializePageIndex(index)
    present(browser, animated: true, completion: {})
  }
  decisionHandler(.allow) //一定要加上这句话 
}

관련 권장 사항:

W iOS용 KWebView 동영상 로드 시 오류 코드=204

IOS Html 리치 텍스트 렌더링 방법: DTCoreText, WKWebView, UIWebView_html/css_WEB-ITnose의 메모리 사용량 비교

WebView 지식 포인트에 대한 자세한 설명

위 내용은 JS는 WKWebView의 그림을 대화식으로 클릭하고 예제를 미리 봅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!