native與html5交互

步驟:

1.設置允許執行JS腳本:

webSettings.setJavaScriptEnabled(true);

2.添加通信接口

webView.addJavascriptInterface(Interface,”InterfaceName”)

3.JS調用Android

InterfaceName.MethodName

4.Android調用JS

webView.loadUrl("javascript:functionName()");


demo:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private WebView mWebView;
    private Button button;
    private WebAppInterface appInterface;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = (Button) findViewById(R.id.button);
        button.setOnClickListener(this);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.loadUrl("file:///android_asset/index.html");

        mWebView.getSettings().setJavaScriptEnabled(true);

        appInterface = new WebAppInterface(this);
        mWebView.addJavascriptInterface(appInterface,"app");
    }

    @Override
    public void onClick(View v) {
        appInterface.showName("你好呀");
    }


    class  WebAppInterface{
        private Context context;
        public WebAppInterface(Context ct){
            this.context  = ct;
        }

        @JavascriptInterface
        public void sayHello(String name){
            Toast.makeText(context,"name="+name,Toast.LENGTH_LONG).show();
        }

        public void showName(final String name){


            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mWebView.loadUrl("javascript:showName('"+name+"')");
                }
            });
        }
    }

佈局比較簡單,一個button和一個webview,就不貼了

html5文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 測試</title>

<style type="text/css">

.input{
width: 90%;
height: 30px;
}
.button{
width: 60%;
height: 20px;
background: #fff;
color: #000
}
</style>


<script type="text/javascript">

function sayhello(){

var name = document.getElementById("txtName").value;
window.app.sayHello(name);
}

function showName(name){
document.getElementById("txtName").value=name;
}
</script>
</head>
<body>
<input id="txtName" class="input" >
<br/>
<hr>
<button class="button" onclick="sayhello()">say Hello</button>

</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章