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代码.
是的,你可以,你可以使用JavaScript来获取网页内容.然后使用webview jsInterface将内容返回给您的java代码.
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)
希望这可以帮助.