質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

WKWebViewで進む・戻る・更新ボタンを実装したい

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,973

syoshinsya

score 33

WKWebViewで進む・戻る・更新ボタンを実装したいと考えております。

色々なサイトを参考にし下記のコードを記述しGoogleのHPを表示するところまで実装しております。

import UIKit
import WebKit

class OfficialViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
    @IBOutlet weak var toolbar: UIToolbar!
    @IBAction func testButton(_ sender: Any) {
    }

    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: "https://www.google.co.jp")
        let request = URLRequest(url: url!)
        webView.load(request)
        webView.allowsBackForwardNavigationGestures = true
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        //Webのロード完了後に実行されるメソッド。WKNavigationDelegateのdelegateを通しておくことを忘れないこと
        _ = webView.title
    }

    // target="_blank"なリンクが押されたときに無反応になるので対処
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        guard let url = navigationAction.request.url else {
            return nil
        }

        guard let targetFrame = navigationAction.targetFrame, targetFrame.isMainFrame else {
            webView.load(URLRequest(url: url))
            return nil
        }
        return nil
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

現状Storyboardの下辺にtoolbarを設置してOutlet接続しています。
色々なサイトを見るとコードで実装と記述があるのですが、WKWebViewでの進む・戻る・更新ボタンなどは基本的にはコードで実装するのでしょうか?
抽象的な質問で申し訳ないのですが、実装方法や参考サイトなどをご教示いただけましたら幸いです。

参考サイト
WKWebviewで簡単なwebViewを作成する \- Qiita
上記を参考にtoolbarのみOUTLET接続する等試してみましたが、toolbarが表示されません。WKWebViewが画面全体に表示されているために表示されないのでしょうか?

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

override func loadView() で Storyboard で作成した View を上書きしているため toolbar が nil になります。Storyboard を使う場合は loadView を使ってはいけません。

ですので、viewDidLoad か何かで追加してやってはいかがでしょうか

    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: view.frame, configuration: webConfiguration)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        view.addSubview(webView)
        view.sendSubview(toBack: webView) // toolbar が webviewの前に来るように

        let url = URL(string: "https://www.google.co.jp")
        let request = URLRequest(url: url!)
        webView.load(request)
        webView.allowsBackForwardNavigationGestures = true
    }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/14 21:23

    ご回答ありがとうございます。
    ご教示いただきました、上記のコードをそのまま実装したところ
    遷移先に遷移するためにタップをした時点でアプリが固まってしまい
    WebViewが表示されない状態になってしまいます。

    キャンセル

0

更新はしたことないので、分かりませんが、現在のURLを再読み込みすればいいのではないでしょうか?

func goBack() {
    if (self.webView.canGoBack) {
        self.webView.goBack()
    } else {
        // canGoBack == false の処理
    }
}

func goForward() {
    if (self.webView.canGoForward) {
        self.webView.goForward()
    } else {
        // canGoForward == false の処理
    }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

これでは、どうでしょうか?

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    var myWebView: WKWebView!

    var goBackBtn: UIButton!
    var goFrwdBtn: UIButton!
    var reLoadBtn: UIButton!

    var devMaxWidth : CGFloat!
    var devMaxHeight: CGFloat!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        devMaxWidth  = self.view.bounds.width
        devMaxHeight = self.view.bounds.height

        goBackBtn = UIButton()
        goFrwdBtn = UIButton()
        reLoadBtn = UIButton()

        myWebView = WKWebView(frame: CGRect(x: 0.0, y: 20.0, width: devMaxWidth, height: devMaxHeight - 70.0 ))
        goBackBtn.frame = CGRect(x: devMaxWidth / 3.0 * 0.0, y: devMaxHeight - 50.0, width: devMaxWidth / 3.0, height: 50.0)
        goFrwdBtn.frame = CGRect(x: devMaxWidth / 3.0 * 1.0, y: devMaxHeight - 50.0, width: devMaxWidth / 3.0, height: 50.0)
        reLoadBtn.frame = CGRect(x: devMaxWidth / 3.0 * 2.0, y: devMaxHeight - 50.0, width: devMaxWidth / 3.0, height: 50.0)

        myWebView.translatesAutoresizingMaskIntoConstraints = false
        myWebView.isUserInteractionEnabled = true
        myWebView.uiDelegate = self
        myWebView.navigationDelegate = self
        myWebView.allowsBackForwardNavigationGestures = true
        self.view.addSubview(myWebView)

        let url = URL(string: "https://www.yahoo.co.jp")
        let request = URLRequest(url: url!)
        self.myWebView.load(request)

        goBackBtn.backgroundColor = UIColor.cyan
        goBackBtn.layer.cornerRadius = 20.0
        goBackBtn.setTitle("戻る", for: .normal)
        goBackBtn.setTitleColor(UIColor.black, for: .normal)
        goBackBtn.tag = 1
        goBackBtn.addTarget(self, action: #selector(ViewController.onClickMyButton(sender:)), for: .touchDown)
        self.view.addSubview(goBackBtn)

        goFrwdBtn.backgroundColor = UIColor.cyan
        goFrwdBtn.layer.cornerRadius = 20.0
        goFrwdBtn.setTitle("進む", for: .normal)
        goFrwdBtn.setTitleColor(UIColor.black, for: .normal)
        goFrwdBtn.tag = 2
        goFrwdBtn.addTarget(self, action: #selector(ViewController.onClickMyButton(sender:)), for: .touchDown)
        self.view.addSubview(goFrwdBtn)

        reLoadBtn.backgroundColor = UIColor.cyan
        reLoadBtn.layer.cornerRadius = 20.0
        reLoadBtn.setTitle("再読込", for: .normal)
        reLoadBtn.setTitleColor(UIColor.black, for: .normal)
        reLoadBtn.tag = 3
        reLoadBtn.addTarget(self, action: #selector(ViewController.onClickMyButton(sender:)), for: .touchDown)
        self.view.addSubview(reLoadBtn)

    }


    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("ページ読み込み完了しました!")
    }

    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("ページ読み込み開始しました!")
    }

    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("エラー1:\(error)")
    }

    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print("エラー2:\(error)")
    }

    func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
        let currenturl = self.myWebView.url
        print("リダイレクト:\(String(describing: currenturl!))")
    }


    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        guard let url = navigationAction.request.url else {
            return nil
        }

        guard let targetFrame = navigationAction.targetFrame, targetFrame.isMainFrame else {
            webView.load(URLRequest(url: url))
            return nil
        }
        return nil
    }

    //         ボタンのイベント.
    @objc func onClickMyButton(sender: UIButton) {
        if (sender.tag == 1){
            print("goBack")
            if myWebView.canGoBack {
                myWebView.goBack()
            }
        } else if (sender.tag == 2){
            print("goForward")
            if myWebView.canGoForward {
                myWebView.goForward()
            }
        } else if (sender.tag == 3){
            print("reLoad")
            self.myWebView.reload()
        }
    }

    override var prefersStatusBarHidden: Bool {
        return false
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる