WebView 和JS 之間交互

時間 2019-11-12

原文原文鏈接

1.android中利用webview調用網頁上的js代碼。javascript

Android 中能夠經過webview來實現和js的交互，在程序中調用js代碼，只須要將webview控件的支持js的屬性設置爲true，，而後經過loadUrl就能夠直接進行調用，以下所示：html

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript:test()");// 調用js函數
mWebView.loadUrl("file:///android_asset/index.html");// 調用本地assets目錄下的html文件，也能夠直接調用網上的html文件。

2. 網頁上調用android中java代碼的方法java

在網頁中調用java代碼，須要在webview控件中添加javascriptInterface。以下所示：jquery

mWebView.addJavascriptInterface(
    new Object() { 
            public void clickOnAndroid() { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                        Toast.makeText(Test.this, "測試調用java", Toast.LENGTH_LONG).show();
                    } 
                }); 
            } 
        }, "demo"); //demo是對象名

在網頁中，只須要像調用js方法同樣，進行調用就能夠android

<div id='b'><a onclick="javascript:window.demo.clickOnAndroid()">b.c</a></div>

網頁加載當即調用web

<body onload="javascript:window.demo.clickOnAndroid()">

3. Java代碼調用js並傳參ajax

首先須要帶參數的js函數，如function test(str)，而後只需在調用js時傳入參數便可，以下所示：api

mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函數test()的參數

4.Js中調用java函數並傳參ide

首先同樣須要帶參數的函數形式，但需注意此處的參數須要final類型，即獲得之後不可修改，若是須要修改其中的值，能夠先設置中間變量，而後進行修改。以下所示：函數

mWebView.addJavascriptInterface(
    new Object() { 
            public void clickOnAndroid(final int i) { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                                int j = i;
                                j++;
Toast.makeText(Test.this, "測試調用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
                    }
                });
            } 
        }, "demo");

而後在html頁面中，利用以下代碼<div id='b'><a onclick="window.demo.clickOnAndroid(2)">b.c</a></div>，便可實現調用

ps:WebView加jquery

public class MainActivity extends Activity {
	private static final String TAG = "MainActivity";

	// 定義訪問的連接
	private static String URL = "file:///android_asset/index.html";

	// 定義WebView
	WebView mWebView = null;

	// 定義數據列表
	private List<Program> programList = null;
	private static final int PROGRAM_NUM = 25;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// 在標題欄上顯示進度
		getWindow().requestFeature(Window.FEATURE_PROGRESS);

		// 建立WebView對象
		mWebView = new WebView(this);
		setContentView(mWebView);

		final Activity activity = this;
		// 在標題欄顯示進度
		mWebView.setWebChromeClient(new WebChromeClient() {
			public void onProgressChanged(WebView view, int progress) {
				activity.setProgress(progress * 100);
			}
		});

		programList = initProgramList();

		// 設置JS可用
		mWebView.getSettings().setJavaScriptEnabled(true);
		// 把programList添加到js的全局對象window中，
		// 這樣就能夠使用window.programList來獲取數據
		mWebView.addJavascriptInterface(programList, "programList");
		mWebView.addJavascriptInterface(this, "MainActivity");

		// 加載頁面
		mWebView.loadUrl(URL);
	}

	/*
	 * 定義js回調java函數
	 */
	public void showSelect(int id) {
		Log.i(TAG, "select:" + id);
	}

	// 綁定鍵盤的向上,向下按鈕事件觸發相應的js事件
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_DPAD_UP) {
			mWebView.loadUrl("javascript:moveUp()");
			return true;
		}
		if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
			mWebView.loadUrl("javascript:moveDown()");
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}

	// 初始化數據
	private List initProgramList() {
		List<Program> list = new ArrayList<Program>();
		for (int i = 1; i <= PROGRAM_NUM; i++) {
			Program p = new Program(i, "Program:::" + i);
			list.add(p);
		}
		return list;
	}

	/*
	 * 定義簡單的數據類
	 */
	class Program {
		private int id;
		private String name;

		public Program(int id, String name) {
			this.id = id;
			this.name = name;
		}

		public int getId() {
			return id;
		}

		public void setId(int id) {
			this.id = id;
		}

		public String getName() {
			return name;
		}

		public void setName(String name) {
			this.name = name;
		}
	}

對應的html文件:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script>
	var startTop = 120;
	var startPos = 1;
	var totalNum = 0;
	var itemHeight = 40;
	$(document).ready(function(){
		var con = '';
		if(window.programList){
			//初始化頁面
			totalNum = window.programList.size();
			for(i=0;i< totalNum;i++){
				con+='<div class="item" tar="'+programList.get(i).getId()+'">'+programList.get(i).getName()+'</div>';
			}
		}
		
		$('#list').html(con);
		//綁定事件
		$('.item').click(function(){
			var tar = $(this).attr('tar');
			//回調java事件
			window.MainActivity.showSelect(tar);
		});
	});
	
	//接收鍵盤向下事件
	function moveDown(){
		if(startPos < totalNum){
			startPos ++;
			var top = (1 - startPos)* itemHeight + startTop;
			$('#list').stop().animate({top:top});
		}
	}
	//接收鍵盤向上事件
	function moveUp(){
		if(startPos > 1){
			startPos --;
			var top = (1 - startPos )* itemHeight + startTop;
			$('#list').stop().animate({top:top});
		}
	}
</script>
<style>
	.box{
		position:relative;
		left:20px;
		top:20px;
		width:200px;
		height:280px;
		background-color:#CCC;
		overflow:hidden;
	}
	
	.list{
		position:absolute;
		left:10px;
		top:120px;
		width:180px;
	}
	
	.item{
		height:40px;
		line-height:40px;
	}
	
	.select{
		position:absolute;
		left:4px;
		top:120px;
		border:1px solid #F00;
		height:40px;
		width:190px;
	}
</style>
</head>
<body >
	
	<div class="box">
    	<div class="list" id="list">
        	
        </div>
        <div class="select">&nbsp;</div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。