Android WebView探索一、Naive与WebView的互相调用

最新推荐文章于 2024-06-21 16:56:23 发布

HappyHeng

最新推荐文章于 2024-06-21 16:56:23 发布

阅读量965

点赞数

分类专栏： android 文章标签： android webview hybrid 混合开发调用

本文链接：https://blog.csdn.net/HappyHeng/article/details/51477682

版权

android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Android的Naive程序是可以嵌套WebView，并且可以做到与WebView的交互，一般来说有两种方法，一是直接交互，比如，Naive直接调用WebView的方法和WebView直接调用Naive的方法。二是WebView可以写<a/>超链接标签，然后用户点击此标签时，Naive可以拦截到点击标签的事件，这样，我们可以在链接上做一套自己的协议，然后Android和IOS可以根据此协议做出相同的处理，做到多平台统一。

我们先研究一下Naive和WebView如何相互调用。

初始化:

mWebView = (WebView) findViewById(R.id.main_wv);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("file:///android_asset/demo.html");
//第一个为交给WebView来进行控制的对象，第二个为控制的对象的变量名，即JS得到此对象后，在为此对象赋名，就可以进行控制了。
mWebView.addJavascriptInterface(this, "naive");

1、 Naive 直接调用JS方法:

下面为html中的JS方法：

function alert(){
document.getElementById("title").innerHTML = "Naive调用Js无参方法";
}

naive进行调用，方式为调用WebView的loadUrl方法，方法中传递一个String，格式为'javascript:'+'方法名'+'(变量)'

public void onJs(View view) {
        mWebView.loadUrl("javascript:alert()");
}

有参数JS方法：

function alertWith(arg){
document.getElementById("title").innerHTML = arg;
}

naive进行有参JS调用：

public void onJsWith(View view) {
        mWebView.loadUrl("javascript:alertWith('Naive调用Js有参方法')");
}

2、JS调用naive:

本地先写好要被调用的方法，注意前面需要加上注解@JavascriptInterface

@JavascriptInterface
public void toast() {
Toast.makeText(this, "JS调用了Naive的无参方法", Toast.LENGTH_SHORT).show();
}

JS调用的代码:

<input type="button" value="点击调用naive代码" οnclick="window.naive.toast()"/><br/>

本地写好有参的要被调用的方法:

@JavascriptInterface
public void toastWith(String toast) {
Toast.makeText(this, toast, Toast.LENGTH_SHORT).show();
}

js调用有参的代码:

<input type="button" value="点击调用naive代码并传递参数"
       οnclick="window.naive.toastWith('JS调用了Naive的有参代码')"/>

下面将Activity的源代码贴出来；

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

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

        mWebView = (WebView) findViewById(R.id.main_wv);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(this, "naive");
        mWebView.loadUrl("file:///android_asset/demo.html");

    }


    public void onJs(View view) {
        mWebView.loadUrl("javascript:alert()");
    }

    public void onJsWith(View view) {
        mWebView.loadUrl("javascript:alertWith('Naive调用Js有参方法')");
    }


    @JavascriptInterface
    public void toast() {
        Toast.makeText(this, "JS调用了Naive的无参方法", Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void toastWith(String toast) {
        Toast.makeText(this, toast, Toast.LENGTH_SHORT).show();
    }

}

下面为HTML的代码:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <script type="text/javascript">
        function alert(){
             document.getElementById("title").innerHTML = "Naive调用Js无参方法";
        }
        function alertWith(arg){
             document.getElementById("title").innerHTML = arg;
        }

    </script>
</head>
<body>
<h1 id="title"></h1><br/>
<input type="button" value="点击调用naive代码" οnclick="window.naive.toast()"/><br/>
<input type="button" value="点击调用naive代码并传递参数"
       οnclick="window.naive.toastWith('JS调用了Naive的有参代码')"/>
</body>
</html>