こんにちは、イノベーションオフィスの吉田です。
先日 Swift 4 で WKWebView を使う機会が有ったのでもうちょっと触ってみました。
ちなみに前回の記事はこちらです。
denen.hatenablog.com
今回は Tab Bar を使って２つの WKWebView を配置し、１つめの WKWebView で新しいウィンドウを開く動作が行われた時に２つめの WKWebView に表示するということを試してみました。
Storyboard はこんな感じになります。
Tab Bar を設置して、Tab Bar Item を２つ配置しています。
Tab Bar Item には対応した Container View が用意されています。
それではコードを見ていきましょう。
import UIKit
import WebKit
class ViewController: UIViewController, UITabBarDelegate, WKUIDelegate, WKNavigationDelegate {
@IBOutlet weak var myTabBar: UITabBar!
@IBOutlet weak var myContainerView1: UIView!
@IBOutlet weak var myContainerView2: UIView!
let wkWebView1 = WKWebView()
let wkWebView2 = WKWebView()
override func viewDidLoad() {
super.viewDidLoad()
myContainerView1.isHidden = false
myContainerView2.isHidden = true
...
wkWebView1.frame = myContainerView1.frame
myContainerView1.addSubview(wkWebView1)
wkWebView1.load(request1 as URLRequest)
let urlString2 = "https://www.yahoo.co.jp/"
let encodeUrlString2 = urlString2.addingPercentEncoding(withAllowedCharacters: NSCharacterSet.urlQueryAllowed)
let url2 = NSURL(string: encodeUrlString2!)
let request2 = NSURLRequest(url: url2! as URL)
wkWebView2.customUserAgent = userAgentStr
wkWebView2.frame = myContainerView2.frame
myContainerView2.addSubview(wkWebView2)
wkWebView2.load(request2 as URLRequest)
myTabBar.selectedItem = myTabBar.items![0]
myTabBar.delegate = self
}
func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem){
switch item.tag {
case 1:
myContainerView1.isHidden = false
myContainerView2.isHidden = true
case 2:
myContainerView1.isHidden = true
myContainerView2.isHidden = false
default:
return
}
}
...
func webView(_ webView: WKWebView,
createWebViewWith configuration: WKWebViewConfiguration,
for navigationAction: WKNavigationAction,
windowFeatures: WKWindowFeatures) -> WKWebView?
{
if navigationAction.targetFrame?.isMainFrame != true {
wkWebView2.load(navigationAction.request)
myTabBar.selectedItem = myTabBar.items![1]
myContainerView1.isHidden = true
myContainerView2.isHidden = false
}
return nil
}
}
前回と同じ部分は省いています。
前回は WKWebView を view に追加していましたが、今回は MyContainerView に追加しています。
そして WKWebView は新しいウィンドウが開かれる時はデフォルトでは何もしてくれません。
なので navigationAction を実装してあげる必要が有るんですね。
あとは Tab Bar のタップ時の処理も追加している感じです。
これでなんとなくの動作が掴めたでしょうか？
実際にタブブラウザを作るとなるともっと色々考えないといけないですが、参考になれば幸いです。
それでは。
書いた人：イノベーションオフィス 室長 吉田
