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    }

投稿2017/05/01 22:10

TakeoAsai

総合スコア880

syoshinsya

2017/05/14 12:23

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

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

関連した質問