WKWebviewで簡単なwebViewを作成する

13123 ワード
Swift2.0 Swift WKWebView Swift テキストリンク

WKWebviewとは

UIWebviewよりも処理が高速かつ、JSのレンダリング周りの処理が安定している。
iOS8以降から使用可能。
googleChromeのiOSアプリもWKWebviewを使用している

Appleの公式ドキュメントにも
For new development, employ this class instead of the older UIWebView class.
とあるので、デフォでこのClassを使う。

1. 宣言

WKWebViewのインスタンスを作成します。
WKWebViewのデリゲートを指定
※ WKNavigationDelegateのプロトコルをClassに指定することを忘れないように

class WebViewController: UIViewController, WKNavigationDelegate {

  ・
　・

  webview = WKWebView()
  webview.navigationDelegate = self
  webview.translatesAutoresizingMaskIntoConstraints = false

2. レイアウト

StoryBoard上ではWKWebviewを配置できないので、
コードでAutoLayoutの制約を付ける必要があります。

※ NSLayoutAnchor(iOS9以降)を使うとAutoLayoutの記述をCSSライクに簡単に書けます

containerView.addSubview(webview!)

// 上辺の制約
webview.topAnchor.constraintEqualToAnchor(containerView.topAnchor, constant: 0.0).active = true
// 下辺の制約
webview.bottomAnchor.constraintEqualToAnchor(containerView.bottomAnchor, constant: 0.0).active = true
// 左辺の制約
webview.leadingAnchor.constraintEqualToAnchor(containerView.leadingAnchor, constant: 0.0).active = true
// 右辺の制約
webview.trailingAnchor.constraintEqualToAnchor(containerView.trailingAnchor, constant: 0.0).active = true

スワイプで戻る・進む

webview.allowsBackForwardNavigationGestures = true
にすると、スワイプ操作ができるようになります

2. webサイトの表示

loadReqestメソッドでページを表示

let request = NSURLRequest(URL: url!)
webview.loadRequest(request)

3. ナビゲーションの設置

戻る・進むボタンの設置の仕方ですが、ここは以前のUIWebVIewと一緒です。
ToolbarをStoryBoardで設置し、今回はコードでボタンを配置しました。

func creatToolbarItems() {

    let backBtnImage = UIImage(named: "back")
    let fowardBtnImage = UIImage(named: "next")    
    let flexbleItem = UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: nil, action: nil)

    // 戻る・進む・リロードボタンの設置
    goBackBtn = UIBarButtonItem(image: backBtnImage, style: .Plain, target: self, action: #selector(goBack))
    goFowardBtn = UIBarButtonItem(image: fowardBtnImage, style: .Plain, target: self, action: #selector(goFoward))
    refreshBtn = UIBarButtonItem(barButtonSystemItem: .Refresh, target: self, action: #selector(refresh))

    toolbar.items = [goBackBtn, goFowardBtn, flexbleItem, refreshBtn]
}

4. デリゲート

WKNavigationのデリゲートメソッドを使用することで、
読み込み開始〜読み込み完了のタイミングのイベントを取得することができます。

よく使う例として、
ブラウザバックができるか判定して、backボタンのON,OFFを切り替える
処理は下記のようになります


// ページ読み込み完了時、呼ばれるメソッド
func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
    if webview.canGoBack {
        goBackBtn.tintColor = nil
    } else {
        goBackBtn.tintColor = UIColor.grayColor()
    }
}

注：target="_blank"なリンクがデフォルトだと開きません

下記のようにデリゲートメソッド内に
target="_blank"の場合の処理を記述

func webView(webView: WKWebView, decidePolicyForNavigationAction navigationAction: WKNavigationAction, decisionHandler: (WKNavigationActionPolicy) -> Void) {

    guard let url = navigationAction.request.URL else {
        decisionHandler(.Cancel)
        return
    }

    // target="_blank"の場合
    if navigationAction.navigationType == WKNavigationType.LinkActivated {
        if navigationAction.targetFrame == nil || !(navigationAction.targetFrame!.mainFrame) {
            webview.loadRequest(NSURLRequest.init(URL: url))
            decisionHandler(.Cancel)
            return
        }
    }

    decisionHandler(.Allow)
}

完成！

参考サイト

WKWebViewでtarget="_blank"なリンクが開かない時の対処法
http://qiita.com/ShingoFukuyama/items/b3a1441025a36ab7659c

CSS OWLセレクターへのODE
新しいベンチマーク:メゾンルータ対PHROTE