使用webView时是否可以将HTML表单中的数据导入android?

Sha*_*raf 20 javascript android code-injection html-parsing webview

我在HTML中创建一个非常简单的表单,在Android中使用webview查看,使用文本框输入你的名字,当你点击按钮时,它会将它显示在一个段落中,并使用html和javascript进行制作.这是我的HTML代码:

<!DOCTYPE html>
<html>
<body>
<p> Write your name and win your favorite game console name and win it! The winners will be announced in 4 days.</p>
Type your name here: <input id="thebox" type="text" name="value" value=""><br>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        var x = document.getElementById("thebox").value;
        document.getElementById("demo").innerHTML = x;
    }
    </script>

    </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

新编辑表格

<form name="albert" action="" method="POST">

 <label for="firstname"> First Name </label>
 <br /><br />

 <input type="text" name="firstname" id="firstname" />

 <input type="submit" name="sbumit" value="Submit" />


</form>
Run Code Online (Sandbox Code Playgroud)

我希望在按钮单击的android中的变量中输入名为"thebox"的输入框中的值,之前我尝试过很多东西,然后我按照一个方法来注入一个JS文件但是因为我对JS一无所知所以我没有尝试过,这是我放在项目中的文件,文件名为inject.js:

document.getElementsByTagName('form')[0].onsubmit = function () {
    var objPWD, objAccount, objSave;
    var str = '';
    var inputs = document.getElementsByTagName('thebox');
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].name.toLowerCase() === 'thebox') {
            objAccount = inputs[i];
        }
    }
    if(objAccount != null) {
        str += objAccount.value;
    }
    if(objPWD != null) {
        str += ' , ' + objPWD.value;
    }
    if(objSave != null) {
        str += ' , ' + objSave.value;
    }
    window.AndroidInterface.processHTML(str);
    return true;
};
Run Code Online (Sandbox Code Playgroud)

后来我跟着那篇文章说它需要在我的MainActivity中加入一些东西但是因为我第一次使用webview,所以我无法理解并且继承了我在MainActivity中添加的代码:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webView = new WebView(this);
        this.setContentView(webView);

        // enable javascript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JavaScriptInterface(), "AndroidInterface");

        // catch events
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                try {
                    view.loadUrl("javascript:" + buildInjection());
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        });

        webView.loadUrl("http://someurl.com");
    }
Run Code Online (Sandbox Code Playgroud)

我在MainActivity中创建的嵌套类:

class JavaScriptInterface {
        @JavascriptInterface
        public void processHTML(String formData) {
            Log.d("AWESOME_TAG", "form data: " + formData);
        }
    }
Run Code Online (Sandbox Code Playgroud)

最后注入代码的方法:

private String buildInjection() throws IOException {
        StringBuilder buf = new StringBuilder();
        InputStream inject = getAssets().open("inject.js");// file from assets
        BufferedReader in = new BufferedReader(new InputStreamReader(inject, "UTF-8"));
        String str;
        while ((str = in.readLine()) != null) {
            buf.append(str);
        }
        in.close();

        return buf.toString();
    }
Run Code Online (Sandbox Code Playgroud)

我希望从我在Android中的webview中显示的html表单(输入框)获得价值,是否真的可以这样做,如果是,请解释一下?谢谢,也请告诉我将获得什么变量值.

Noo*_*rul 23

    Webview browser=(WebView)view.findViewById(R.id.webChart);
    browser.getSettings().setJavaScriptEnabled(true);
    browser.addJavascriptInterface(new WebAppInterface(getActivity()), "Android");
    browser.loadUrl("file:///android_asset/yourHtmlFileName.html");
Run Code Online (Sandbox Code Playgroud)

添加此接口类,WebAppInterface

public class WebAppInterface {
 Context mContext;
 String data;

 WebAppInterface(Context ctx){
    this.mContext=ctx;
 } 


 @JavascriptInterface
 public void sendData(String data) {
    //Get the string value to process
      this.data=data;
 }
}
Run Code Online (Sandbox Code Playgroud)

您的HTML代码数据

 function loadChartData() {
  var x = document.getElementById("thebox").value;
   Android.sendData(x);
 }
Run Code Online (Sandbox Code Playgroud)

当html按钮在android webview中单击时调用此函数

UPDATE

1)默认情况下,在webview中禁用javascript.启用它,获取webview的设置并调用setJavaScriptEnabled(true); 为真.

2)创建Javascript代码和Android代码之间的接口,需要创建Javacript接口类.

3)将你的javascript代码之间的接口绑定到android代码,你需要传递接口类的引用和你的javaScript可以调用的接口名来访问该类.

4)传递html文件路径加载到webview(浏览器).

5)创建如下所示的接口类(WebAppInterface).

有关详细信息,参阅此链接 https://developer.android.com/guide/webapps/webview.html

6)在HTML文件中,创建按钮并将点击监听器添加到该按钮,并使用接口名称(此处为Android)调用sendData("您的值")函数.

就这样.你可以将值从html传递给你的android代码.


Kri*_*ofe 5

是的,你可以,你可以使用JavaScript来获取网页内容.然后使用webview jsInterface将内容返回给您的java代码.

参考这个github项目.这个答案和这篇文章.

final Context myApp = this;

/* An instance of this class will be registered as a JavaScript interface */
class MyJavaScriptInterface
{
    @JavascriptInterface
    @SuppressWarnings("unused")
    public void processHTML(String html)
    {
        // process the html as needed by the app
    }
}

final WebView browser = (WebView)findViewById(R.id.browser);
/* JavaScript must be enabled if you want it to work, obviously */
browser.getSettings().setJavaScriptEnabled(true);

/* Register a new JavaScript interface called HTMLOUT */
browser.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");

/* WebViewClient must be set BEFORE calling loadUrl! */
browser.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url)
    {
        /* This call inject JavaScript into the page which just finished loading. */
        browser.loadUrl("javascript:window.HTMLOUT.processHTML('<head>'+document.getElementsByTagName('html')[0].innerHTML+'</head>');");
    }
});

/* load a web page */
browser.loadUrl("http://lexandera.com/files/jsexamples/gethtml.html");
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助.

  • 请解释一下代码,并说明数据来自哪里(例如数据进入的变量) (2认同)