iOS

【Swift】WKWebViewでタップしたURLを取得する。

投稿日:

はじめに

こんにちはsuzukiです。

最近WKWebViewを新規で追加する機会がありました。
以前の実装からしばらく経っていたため、実装漏れもあり想定以上に時間をかけた為、備忘もかねてまとめて行きたいと思います。

今回の要件
・表示されている画面のナビゲーションにタイトルを追加
・ロングタップの禁止
・特定のリンクの場合はブラウザを起動して表示
上記の3点となります。

該当しない箇所はサクサク進めて行こうと思います。

WKWebViewについて

ご存知の方も多いかとは思いますが、WKWebViewについてまとめさせていただきます。

WKWebViewはアプリの内でwebの表示を行うため用意されているオブジェクトです。
UIWebViewのほぼ上位互換で最近ではStoryboardから追加が可能になりました。
(今回使おうとしたのですが、DeploymentTargetがiOS11以上でないと使えませんでした、、)
ローカルの動画の再生などにも利用可能です。

WKWebViewの基本実装

今回の画面構成は下記となります。※toolbarのボタンとtoolbarは関連付けを行います。
・Navigation
title
・WKWebView
・Toolbar
button
・indicator

コード

ナビゲーションにタイトルを追加

下記の通信完了時に呼ばれるデリゲートで表示されている画面のタイトルを取得を行います。

こちらでページの読み込みが完了するとナビゲーションタイトルが更新される様になりました。

ロングタップの禁止

WKWebViewで表示されているLinkを押した時の動作がWKWebViewには設定されています。
・長押しでアクションシートを表示する。
・3Dタッチでsafariでリンク先を表示する。
上記が元から設定されているのですが、今回不要なため機能を制限します。

下記のコードをsetWKWebView()の関数の中で記述しましょう。

読み込み完了時に呼ばれるデリゲートの中で

下記のコードも記述します。

上記の設定で長押しと3Dタッチが機能しなくなりました。

特定のリンクの場合はブラウザを起動して表示

こちらに関しては
・webViewでリンクを押された事を取得
・押されたリンクのURLを取得
・取得したURLが対象のリンクか確認
・アプリからsafariを起動
上記ができれば実装完了です。

まずwebViewでリンクを押された事を取得するため下記のデリゲートを実装しましょう。

こちらのデリゲートはリンクがタップされた時に呼ばれリンクの内容によって読み込みを行うか許可と禁止の選択が行えます。
・decisionHandler(.allow)を呼び出す読み込みの許可
・decisionHandler(.cancel)を呼び出す読み込みの禁止
今回はデリゲート内で特定のリンクの場合はブラウザを起動して表示します。
下記のコードでは、特定のリンクの場合はwebViewはそのままの画面を表示するために読み込みの禁止し、該当しない場合は読み込みを許可しております。

今回は特定のリンクでサファリを開きましたが、アプリ内の別画面に遷移などもこちらの箇所から設定できます。

さいごに

今回WKWebViewのコードのをまとめて思いましたが、
昔使用していたUIWebViewに比べ、設定する内容が多いので手間ですね。
早くiOS11以上の端末のみを対象にして、Storyboardでペタペタ配置したいです。

そろそろXCode10のベータ版も試していきたいと思います。
最後までありがとうございました。

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

swift

UITableViewでTableViewCell(Xib)を使ってみた

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX ...

swift

[Swift3] Segmentを使った画面切り替え (Extra View)

1 はじめに1.1 前提条件2 Segmentの用意3 表示したいViewを用意4 Extra Viewsに追加5 Segmentでの切り替え5.1 デフォルトで表示されるViewを設定5.2 Seg ...

【Swift】QuickActionで普段と異なる初期画面を表示する。

1 はじめに2 Quick Actionとは3 実装方法3.1 Quick Actionの追加3.2 タップされた際の動作3.2.1 アプリが起動していない場合3.2.2 アプリが起動している場合4 ...

Moya vs APIKit

1 はじめに2 MoyaとAPIKitの概要2.1 Githubの比較2.2 機能比較3 実装の比較3.1 リクエスト定義3.2 レスポンスstruct3.3 リクエスト送信3.4 出力結果4 さいご ...

swift

Swift3 StoryBoard上でUIButtonやUILabel、UIViewのcornerを変更する

1 はじめに1.1 前提条件2 StoryBoardの準備3 カスタムクラスの作成3.1 class ~について3.2 @IBDesignableを記述すると3.2.1 Live Renderingと ...

フォロー

blog-page_side_responsive

2018年8月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。