您的位置：首页 > 移动开发 > Android开发

Android中通过WebView获取Html中的隐藏域

2015-05-18 18:36 851 查看
现在市场上大大小小的app大都是Native端加上Html5端的形式，这其中就不可避免的要处理两者之间的交互了，尤其用的多的是Android与JS的交互，那么接下来就看看是怎么处理的。

Android端主要代码：

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

public class TestWebViewReadingHiddenField extends AppCompatActivity {
    private static final String TAG = "ReadingHiddenField";
    private Button mBtn;
    private WebView mWebView;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_reading_hidden_filed);
        mBtn = (Button) findViewById(R.id.btn);
        mWebView = (WebView) findViewById(R.id.webView);
        initWebView();
        mBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                reLoadJs();
            }
        });
    }

    private void initWebView() {
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
	mWebView.addJavascriptInterface(new WebJsInterface(), "GetParamByJs");
        mWebView.setWebViewClient(new MyWebViewClient());
        mWebView.loadUrl("file:///android_asset/sample.html");
    }
	
    private class WebJsInterface {
	 public void getWebInfo(String message) {
		Log.i("--message", message);
	 }
    }

    private class MyWebViewClient extends WebViewClient {
          @Override
          public void onPageFinished(WebView view, String url) {	    
mWebView.loadUrl("javascript:getInfoFromJs");
} }}


Html端主要代码

<html>
<head>
    <meta charset="UTF-8" content="text/html"/>
<script type="text/javascript">
     function getInfoFromJs( param ){  
        GetParamByJs.getWebInfo(param));   
    } 
    </script>
</head>
<body>
<div>
    <input type="hidden" id="aa" value="testAA">
    <input type="hidden" id="bb" value="testBB">
    <input type="hidden" id="cc" value="testCC">
</div>
<p>
    <!-- 这个Say hello 按钮调用Android代码中的方法 -->
    用JavaScript按钮调用Android代码 <br/>
    <input type="button"
   value="hello" onClick="getInfoFromJs(document.getElementById("aa").value)"/>
</p>
</body>
</html>
注释的代码是我们平常用的较多的一种获取js里面的值的方法，通过在Html代码中写一个JS方法，把隐藏域的值传进来，对应的js代码为这一句：
GetParamByJs.getWebInfo(message);
GetParamByJs为addJavascriptInterface的第二个参数，getWebInfo对应第一参数对象里的方法名，第二个参数以及getWebInfo的参数必须是通信双方事先约定好的名称，这样看来差不多了，一两个参数还不觉得繁琐，直接在getWebInfo后面拼接几个对应的参数名即可，但要是客户端要获取更多的参数，比如7，8个，那么这种方式就不那么好看了，而且Html端处理起来也繁琐，那么我们就看看第二种方式吧：

Html端不用变，只需在Android端加上这几句代码即可，

mWebView.addJavascriptInterface(new WebAppInterface(this), "GetShareParam");
然后看看WebAppInterface的内容

private class WebAppInterface {
        Context mContext;
        WebAppInterface(Context c) {
            mContext = c;
        }

        /**
         * 参数处理
         *
         * @param param     参数字段
         * @param paramType 参数类型
         */
        @JavascriptInterface
        @SuppressWarnings("unused")
        public void processParam(String param, int paramType) {
            if (TextUtils.isEmpty(param)) {
                Log.i("--param", "null or \" \"");
            } else {
                if (1 == paramType) {
                    Log.i("--aaa", param);
                } else if (2 == paramType) {
                    Log.i("--bbb", param);
                } else if (3 == paramType) {
                    Log.i("--ccc", param);
                }
            }
        }
    }
然后在MyWebViewClient中的onPageFinished方法里面写上方法：

reLoadJs()
reLoadJs方法定义如下：

// 通过外部自定义的Js方法获取Html中的隐藏域值
mWebView.loadUrl("javascript:window.GetShareParam.processParam(document.getElementById('aa').value, 1);");
mWebView.loadUrl("javascript:window.GetShareParam.processParam(document.getElementById('bb').value, 2);");
mWebView.loadUrl("javascript:window.GetShareParam.processParam(document.getElementById('cc').value, 3);");</span>
通过这样的方式，在Html端就不需要再专门定义一些Js方法来帮助客户端获取参数了，是不是简洁方便多了^-^.当然我们这里只是获取了一些隐藏域值，一般用于页面分享的需要，我们在这里还可以通过外部js获取html各个节点的值，具体的实现大家可以去参考js的API，好了今天就到此为止，欢迎大家指正。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航