Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[WebViewシリーズ②] WebView内でJavaScriptのメソッドを操作する

More than 3 years have passed since last update.

はじめに

[WebViewシリーズ①] WebViewのイベントをフックするの続編です。

前回は、WebViewからネイティブアプリを操作しましたが、
今回は、ネイティブアプリからWebViewを操作する方法をご紹介します。

やること

下記パターンのJavaScriptメソッドを呼ぶ方法について

① 引数なし、戻り値なし
② 引数あり、戻り値なし
③ 引数あり、戻り値あり
④ 引数あり、戻り値あり(JSON形式)

やらないこと

・WebViewの表示方法について
・JavaScriptについて

実装例

  1. WebViewに操作したいJavaScriptのメソッドが定義されているhtmlファイルを表示する
  2. JavaScriptを操作する(stringByEvaluatingJavaScriptFromString)

1については、割愛します。
以下に、2について順にご紹介します。

1. 引数なし、戻り値なし

JS
    function pokemonGo() {
        // do something
    }
Swift
    webView.stringByEvaluatingJavaScriptFromString("window.pokemonGo();")

2. 引数あり、戻り値なし

JS
    function moveToLocation(lat, lng) {
        // 位置情報の偽装はいけません。
    }
Swift
    let lat = 139.7
    let lng = 35.6
    webView.stringByEvaluatingJavaScriptFromString("window.moveToLocation('\(lat)', '\(lng)');")

3. 引数あり、戻り値あり

JS
    function getMonster() {
        return "pokemon"
    }
Swift
    if let name = webView.stringByEvaluatingJavaScriptFromString("window.getMonster();") {
        print(name)
    }

4. 引数あり、戻り値あり(JSON形式)

JS
    function getMonsterInfo() {
      return { "name":"フシギダネ", "number":1 };
    }
Swift
    if let monsterInfoStr = webView.stringByEvaluatingJavaScriptFromString("JSON.stringify(window.getMonsterInfo());") {

        if let monsterInfoData = monsterInfoStr.dataUsingEncoding(NSUTF8StringEncoding) {

            do {
                let monsterInfoJson = try NSJSONSerialization.JSONObjectWithData(monsterInfoData,
                                                                             options: NSJSONReadingOptions.MutableContainers)
                print(monsterInfoJson);
            } catch let error as NSError {
                print(error.description)
            }
        }
    }

まとめ

WebView内でJavaScriptのメソッドを操作するには、下記の2ステップが必要です。

  1. WebViewに操作したいJavaScriptのメソッドが定義されているhtmlファイルを表示する
  2. JavaScriptを操作する(stringByEvaluatingJavaScriptFromString)

こちらも合わせて読んでください♥

[WebViewシリーズ①] WebViewのイベントをフックする
[WebViewシリーズ②] WebView内でJavaScriptのメソッドを操作する
[WebViewシリーズ③] WebViewは、ページ内のアンカーへリンクできない??
[WebViewシリーズ④] WebView(アプリ内)のリンクからiTunesが表示できない

ゆるふわにUIWebViewでJavaScriptイベントをひろってみる

誤り等ございましたら、ご指摘頂ければ幸いです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away