ネイティブコードから WebView 内の JavaScript を実行する方法。今回は jQuery Mobile を利用
当サイトの姉妹サイトであるjQuery 入門 にて、以前jQuery Mobile でプログラムからページを切り替える なる記事を書きました。
jQuery Mobile は基本的にページの遷移などもある程度自動的に、"モバイルアプリ" っぽく処理してくれるわけですが、ボタンなどをクリック、何らかの条件分岐、ページ遷移、という流れでは自分でページ遷移をしていしないといけない。
このときに必要になる処理として、changePage メソッドで明示的にページを切り替える、ということです。
WebView と HTML5、特に jQuery Mobile を組み合わせたハイブリット構成でモバイルアプリケーションを構成する場合、ネイティブコード側で何らかの処理をして、その結果、WebView 内のページ遷移をしないといけない場合があるでしょう。
こうした場合にどうすれば良いのか考えます。
要はネイティブコードから WebView 内にロードされた HTML/JavaScript ページの JavaScript を実行する方法です。
jQuery Mobile のメソッドを呼ぶ
今回は特に、上記のように jQuery Mobile を利用した場合を考えて、「ネイティブコードのボタンをクリックして、WebView 内の jQuery Mobile のページが切り替わる」という例を取り上げてみます。
WebView に jQuery Mobile のページをロード。画面下側にネイティブのボタン (HTML のボタンではない) を配置。
そのボタンを押すと...
jQuery Mobile のページが切り替わる、という流れです。
つまり、ネイティブコードで changePage メソッドを呼ぶ、というわけです。
前置きは長くなりましたが、実は簡単なことです。
コードは次の通りです。
packagecom.keicode.android.test.webviewtest2;importandroid.os.Bundle;importandroid.annotation.SuppressLint;importandroid.app.Activity;importandroid.view.Menu;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.webkit.WebChromeClient;importandroid.webkit.WebSettings;importandroid.webkit.WebView;importandroid.webkit.WebViewClient;importandroid.webkit.GeolocationPermissions.Callback;importandroid.widget.Button;publicclassMainActivityextendsActivityimplementsOnClickListener{WebViewwebView;ButtongoButton;@SuppressLint("SetJavaScriptEnabled")@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);goButton=(Button)findViewById(R.id.goButton);goButton.setOnClickListener(this);webView=(WebView)findViewById(R.id.webview1);webView.setWebViewClient(newWebViewClient(){@OverridepublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){returnfalse;}});webView.setWebChromeClient(newWebChromeClient(){@OverridepublicvoidonGeolocationPermissionsShowPrompt(Stringorigin,Callbackcallback){callback.invoke(origin,true,false);}});WebSettingswebSettings=webView.getSettings();webSettings.setJavaScriptEnabled(true);webView.loadUrl("http://jquery.keicode.com/mobile/demo5/");}@OverridepublicvoidonClick(Viewv){switch(v.getId()){caseR.id.goButton:webView.loadUrl("#"#" として、呼びたい JavaScript コードを書いているだけです。今回はそこで単に changePage メソッドを呼んだ、というわけです。ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞよろしくお願いします。