JS は、WKWebView 内の画像を対話的にクリックし、例をプレビューします。

小云云
リリース: 2018-01-08 09:09:11
オリジナル
1951 人が閲覧しました

この記事では主に、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 + '+';" +
    "};" +
    "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('img');" +
    "var length=imgs.length;" +
    "for(var i=0;i<length;i++){" +
    "img=imgs[i];" +
    "img.onclick=function(){" +
    "window.location.href='image-preview:'+this.src}" +
    "}" +
    "}"
  webView.evaluateJavaScript(jsClickImage, completionHandler: nil)
  webView.evaluateJavaScript("registerImageClickAction()", completionHandler: nil)
}
ログイン後にコピー

2. SKPhotoBrowserフレームワークを使用して画像プレビュー機能を実装する

関連する推奨事項:

W for iOS KWebViewビデオ読み込み時のエラー Code=204

IOS Html リッチ テキスト レンダリング方法: DTCoreText、WKWebView、UIWebView_html/css_WEB-ITnose のメモリ使用量比較

WebView の知識ポイントの詳細な説明

🎜

以上がJS は、WKWebView 内の画像を対話的にクリックし、例をプレビューします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート