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

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が画面全体に表示されているために表示されないのでしょうか？

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

回答3件

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

swift
1import UIKit
2import WebKit
3
4class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
5
6    var myWebView: WKWebView!
7    
8    var goBackBtn: UIButton!
9    var goFrwdBtn: UIButton!
10    var reLoadBtn: UIButton!
11
12    var devMaxWidth : CGFloat!
13    var devMaxHeight: CGFloat!
14
15    override func viewDidLoad() {
16        super.viewDidLoad()
17        // Do any additional setup after loading the view, typically from a nib.
18        
19        devMaxWidth  = self.view.bounds.width
20        devMaxHeight = self.view.bounds.height
21        
22        goBackBtn = UIButton()
23        goFrwdBtn = UIButton()
24        reLoadBtn = UIButton()
25        
26        myWebView = WKWebView(frame: CGRect(x: 0.0, y: 20.0, width: devMaxWidth, height: devMaxHeight - 70.0 ))
27        goBackBtn.frame = CGRect(x: devMaxWidth / 3.0 * 0.0, y: devMaxHeight - 50.0, width: devMaxWidth / 3.0, height: 50.0)
28        goFrwdBtn.frame = CGRect(x: devMaxWidth / 3.0 * 1.0, y: devMaxHeight - 50.0, width: devMaxWidth / 3.0, height: 50.0)
29        reLoadBtn.frame = CGRect(x: devMaxWidth / 3.0 * 2.0, y: devMaxHeight - 50.0, width: devMaxWidth / 3.0, height: 50.0)
30
31        myWebView.translatesAutoresizingMaskIntoConstraints = false
32        myWebView.isUserInteractionEnabled = true
33        myWebView.uiDelegate = self
34        myWebView.navigationDelegate = self
35        myWebView.allowsBackForwardNavigationGestures = true
36        self.view.addSubview(myWebView)
37            
38        let url = URL(string: "https://www.yahoo.co.jp")
39        let request = URLRequest(url: url!)
40        self.myWebView.load(request)
41            
42        goBackBtn.backgroundColor = UIColor.cyan
43        goBackBtn.layer.cornerRadius = 20.0
44        goBackBtn.setTitle("戻る", for: .normal)
45        goBackBtn.setTitleColor(UIColor.black, for: .normal)
46        goBackBtn.tag = 1
47        goBackBtn.addTarget(self, action: #selector(ViewController.onClickMyButton(sender:)), for: .touchDown)
48        self.view.addSubview(goBackBtn)
49            
50        goFrwdBtn.backgroundColor = UIColor.cyan
51        goFrwdBtn.layer.cornerRadius = 20.0
52        goFrwdBtn.setTitle("進む", for: .normal)
53        goFrwdBtn.setTitleColor(UIColor.black, for: .normal)
54        goFrwdBtn.tag = 2
55        goFrwdBtn.addTarget(self, action: #selector(ViewController.onClickMyButton(sender:)), for: .touchDown)
56        self.view.addSubview(goFrwdBtn)
57            
58        reLoadBtn.backgroundColor = UIColor.cyan
59        reLoadBtn.layer.cornerRadius = 20.0
60        reLoadBtn.setTitle("再読込", for: .normal)
61        reLoadBtn.setTitleColor(UIColor.black, for: .normal)
62        reLoadBtn.tag = 3
63        reLoadBtn.addTarget(self, action: #selector(ViewController.onClickMyButton(sender:)), for: .touchDown)
64        self.view.addSubview(reLoadBtn)
65   
66    }
67    
68
69    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
70        print("ページ読み込み完了しました！")
71    }
72    
73    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
74        print("ページ読み込み開始しました！")
75    }
76        
77    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
78        print("エラー1:(error)")
79    }
80        
81    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
82        print("エラー2:(error)")
83    }
84        
85    func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
86        let currenturl = self.myWebView.url
87        print("リダイレクト:(String(describing: currenturl!))")
88    }
89        
90        
91    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
92        guard let url = navigationAction.request.url else {
93            return nil
94        }
95            
96        guard let targetFrame = navigationAction.targetFrame, targetFrame.isMainFrame else {
97            webView.load(URLRequest(url: url))
98            return nil
99        }
100        return nil
101    }
102    
103    //         ボタンのイベント.
104    @objc func onClickMyButton(sender: UIButton) {
105        if (sender.tag == 1){
106            print("goBack")
107            if myWebView.canGoBack {
108                myWebView.goBack()
109            }
110        } else if (sender.tag == 2){
111            print("goForward")
112            if myWebView.canGoForward {
113                myWebView.goForward()
114            }
115        } else if (sender.tag == 3){
116            print("reLoad")
117            self.myWebView.reload()
118        }
119    }
120
121    override var prefersStatusBarHidden: Bool {
122        return false
123    }
124
125    override func didReceiveMemoryWarning() {
126        super.didReceiveMemoryWarning()
127        // Dispose of any resources that can be recreated.
128    }
129}
130

投稿2018/05/25 07:08

t.harima

総合スコア55

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

swift
1func goBack() {
2    if (self.webView.canGoBack) {
3        self.webView.goBack()
4    } else {
5        // canGoBack == false の処理
6    }
7}
8
9func goForward() {
10    if (self.webView.canGoForward) {
11        self.webView.goForward()
12    } else {
13        // canGoForward == false の処理
14    }
15}

投稿2017/10/05 06:53

harima

総合スコア17

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

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

swift
1    override func viewDidLoad() {
2        super.viewDidLoad()
3        
4        let webConfiguration = WKWebViewConfiguration()
5        webView = WKWebView(frame: view.frame, configuration: webConfiguration)
6        webView.navigationDelegate = self
7        webView.uiDelegate = self
8        view.addSubview(webView)
9        view.sendSubview(toBack: webView) // toolbar が webviewの前に来るように
10        
11        let url = URL(string: "https://www.google.co.jp")
12        let request = URLRequest(url: url!)
13        webView.load(request)
14        webView.allowsBackForwardNavigationGestures = true
15    }