Android WebView JavaScript交互

  今天介绍一下,Android中Webview与JavaScript的交互,首先是在布局文件里添加webview控件:

  然后是在manifest里添加权限:

WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);

  然后创建JavaScript的接口:

public class WebAppInterface {
		Context mContext;

		/** Instantiate the interface and set the context */
		WebAppInterface(Context c) {
			mContext = c;
		}

		/** Show a toast from the web page */
		@JavascriptInterface
		public void showToast(String toast) {
			Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
		}
	}

  给webview添加JavaScript接口:

myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");

  本地JavaScript文件:



  整个代码如下:

public class MainActivity extends Activity {
	private WebView myWebView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		myWebView = (WebView) findViewById(R.id.webview);
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
		ProcessWebString();

	}

	public class WebAppInterface {
		Context mContext;

		/** Instantiate the interface and set the context */
		WebAppInterface(Context c) {
			mContext = c;
		}

		/** Show a toast from the web page */
		@JavascriptInterface
		public void showToast(String toast) {
			Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
		}
	}

	private void ProcessWebString() {
		// 加载 asset 文件
		String tpl = getFromAssets("web_tpl.html");
		myWebView.loadDataWithBaseURL(null, tpl, "text/html", "utf-8", null);
	}

	/*
	 * 获取html文件
	 */
	public String getFromAssets(String fileName) {
		try {
			InputStreamReader inputReader = new InputStreamReader(
					getResources().getAssets().open(fileName));
			BufferedReader bufReader = new BufferedReader(inputReader);
			String line = "";
			String Result = "";
			while ((line = bufReader.readLine()) != null)
				Result += line;
			return Result;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "";
	}

}

  运行效果:

Android WebView JavaScript交互_第1张图片

你可能感兴趣的:(Android)