Xamarin.iOS Ｗｅｂビューにおける C# と JavaScript の相互呼び出し

1 C#からJavaScriptの呼び出し

f:id:furuya02:20140717010744p:plain:w180:left

f:id:furuya02:20140717010814p:plain:w150:left

f:id:furuya02:20140717010813p:plain:w150:left

最初に、Ｗｅｂビューとボタンを置き、ローカルのHTMLファイルを表示しました。

Ｗｅｂビュー(UIWebView)のEvaluateJavascript()を使用してJavaScriptを実行することができます。

ボタンを押すと、Ｗｅｂビューの中でJavaScriptが実行され、alert()が表示されます。

public override void ViewDidLoad(){
    base.ViewDidLoad();
            
    //Content/sample.htmlの表示
    var fileName = Path.Combine(NSBundle.MainBundle.BundlePath, "Content/sample.html");
    webView1.LoadRequest(new NSUrlRequest(new NSUrl(fileName, false)));

    //ボタンを押したときのイベント処理
    button1.TouchUpInside += (sender, args) =>{
        //JavaScriptの実行
        var js = "alert('test');";
        webView1.EvaluateJavascript(js);
    };
}

f:id:furuya02:20140717010840p:plain:w150:left

次のようなHTMLファイル（Content/sample.html）を用意して、JavaScript内のfunctionを呼び出すこともできます。

<!DOCTYPE html>
<html lang="jp">
    <body style="background-color: #87ceeb">
        <h1>Sample</h1>
        <script>
            function test(message) {
                alert(message);
            }
        </script>
    </body>
</html>

//ボタンを押したときのイベント処理
button1.TouchUpInside += (sender, args) =>{
    //HTML内のファンクションtest()をコールする
    var js = "test('テストメッセージ');";
    webView1.EvaluateJavascript(js);
};

2 JavaScriptからC#の呼び出し

iOSでは、アプリケーション(C#)側へ直接データを送る方法が用意されていません。そこで、ページ遷移を利用してクエリ文字列にデータを乗せる方法をとります。

アプリ側では、ＷｅｂビューのShouldStartLoadにデリゲートをセットして、ページ遷移時の動作をトラップして、データを受け取ります。なお、通常のページ遷移と区別するためは、オリジナルなスキーム等を利用します。

下記のHTMLでは、ボタンを押すとhogeというスキームのURLにページ遷移するようになっています。そして、この時パラメータといてmsg=TESTを付加しています。

<!DOCTYPE html>
<html lang="jp">
    <body style="background-color: #87ceeb">
    <h1>Sample</h1>
        
    <button type="button" onclick="document.location.href = 'hoge://X?msg=TEST'">TEST</button>

</body>
</html>

そして、C#側では、デリゲートでhogeというスキームを捕まえます。

webView1.ShouldStartLoad = (view, request, type) => {
    if (request.Url.Scheme == "hoge"){ //スキームがhogeの場合
        var query  =  request.Url.Query; //パラメータ取得
        return false;//ページ遷移は無効
    }
    return true;//その他、そのままページ遷移する
};

f:id:furuya02:20140717010904p:plain:w450:left
図は、C#側のデリゲートにブレークポイントを仕掛けて、Ｗｅｂビューでボタンを押したときに、パラメータが受け取れているようすです。