通过Android WebView中的javascript检测点击HTML按钮
Posted
技术标签:
【中文标题】通过Android WebView中的javascript检测点击HTML按钮【英文标题】：Detect click on HTML button through javascript in Android WebView 【发布时间】：2011-05-03 04:38:19 【问题描述】：我对 javascript 不是很熟悉，但我认为这是实现我的目的的最佳方式。如果没有，请纠正我。
最后我有一个许可证文本 2 个按钮。所有这些都是在WebView 中用 html 编写的，因为许可证中有一些链接。现在，我希望当用户单击WebView 中的“确定”按钮时，这会触发一些我可以在Java 中抓取的javascript 或侦听器来触发Intent 以在应用程序中前进。 （取消按钮会做相反的事情，但如果我知道如何做一个，我可以做另一个。;））
这会给某人敲响警钟吗？ 欢迎任何解释或示例代码。
【问题讨论】：
【参考方案1】：经过一番阅读，我终于自己搞定了。当您对 javascript 一无所知并且文档在该主题上相当薄弱时，这有点困难。 这是我的解决方案，希望这对其他人有帮助：
HTML 页面的末尾包含 2 个按钮：
<div>
<button type="button" id="ok" style="font-weight: 700; margin-right: 20px;" onclick="validClick();">J'accepte</button>
<button type="button" id="no" onclick="refuseClick();">Je refuse</button>
</div>
我将点击事件发送到 HTML 页面顶部的 javascript：
<script language="javascript">
function validClick()
valid.performClick();
document.getElementById("ok").value = "J'accepte";
function refuseClick()
refuse.performClick();
document.getElementById("no").value = "Je refuse";
</script>
valid 和 refuse 是我通过 javascript 接口传递以使用它们的方法的 2 个 java 对象。所以在 java 中，我创建了 2 个按钮（没有真正显示在 Activity 中，仅在此处显示它们的方法，并且是 HTML 按钮的阴影：
valid = new Button(ctx);
valid.setOnClickListener(this);
refuse = new Button(ctx);
refuse.setOnClickListener(this);
然后我将javascript添加到我的WebView：
// Enablejavascript
WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
// Add the interface to record javascript events
wv.addJavascriptInterface(valid, "valid");
wv.addJavascriptInterface(refuse, "refuse");
最后，在 onClick 方法中处理点击事件：
@Override
public void onClick(View v)
if (v.equals(valid))
//do Something
else if (v.equals(refuse))
//do Something else
希望对一些人有所帮助
【讨论】：
@Sephy 你能解释一下什么是有效的，拒绝它们是按钮还是 JavaWebInterface 对象？ onclick 方法是因为您实现了 onclick 侦听器或类似的东西？很抱歉，我无法运行上面的代码。请帮忙。谢谢 @Sephy 这在 android 2.3 中不起作用。我有什么方法可以实现吗？ 这里有人吗？它也不适用于 4.1 和 4.2。请帮忙 不在assets文件夹中的远程url，如何获取点击 @Sephy：我假设这里的对象应该有一个点击监听器，函数的名称并不重要，Ami 对吧？或者说它只是 performClick 可以替换为任何文本？【参考方案2】：这是一个更简单的解决方案。在 Java 端，为每个按钮创建一个侦听器。它不需要是任何特定的类，因为该方法将使用反射来查找：
WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
wv.addJavascriptInterface(new Object()
public void performClick()
// Deal with a click on the OK button
, "ok");
然后在HTML中，直接从button标签中调用：
<button type="button" onclick="ok.performClick();">OK</button>
【讨论】：
在我看来和我的完全一样，虽然只有一个按钮。请注意，我会将 javascript 界面绑定到 Button 而不是简单的 Object，这样您就可以受益于按钮周围的整套方法和内容！ peastman 的方法实际上更好，至少在语义上。绑定到Button 会诱使人们认为它们之间存在联系，但实际上并没有。代码并不关心你是否将 JavaScript 绑定到 Button 或 Bitmap 或普通的 Object。它会调用你告诉它的任何函数。您无法访问额外的方法。例如，在 Java Button 对象上调用 setText() 不会更改 HTML 按钮的文本。
重要！对于 api 级别 17+ 的设备，不要忘记添加“@JavascriptInterface”注释。来自developer.android.com/guide/webapps/webview.html 注意：如果您将 targetSdkVersion 设置为 17 或更高，则必须将“@JavascriptInterface”注释添加到您希望 JavaScript 可用的任何方法（该方法也必须是公共的）。如果您不提供注释，则在 Android 4.2 或更高版本上运行时，您的网页将无法访问该方法。
我试过但不适合我。请看***.com/questions/20917235/…
无法添加 javascriptInterface【参考方案3】：
如果您还想检索按钮值。
Java：
WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
wv.addJavascriptInterface(new Object()
@JavascriptInterface // For API 17+
public void performClick(String strl)
stringVariable = strl;
Toast.makeText (YourActivity.this, stringVariable, Toast.LENGTH_SHORT).show();
, "ok");
HTML：
<button type="button" value="someValue" onclick="ok.performClick(this.value);">OK</button>
【讨论】：
这个名称“performClick”在 java 和 javascript 中是否必须相同？ 这个名称“performClick”在 java 和 javascript 中是否必须相同？ @user1530779 是的，因为它是 Object 函数的名称【参考方案4】： WebView browser = new WebView(this);
browser.getSettings().setJavaScriptEnabled(true);
browser.loadUrl("file:///android_asset/page.html");
setContentView(browser);
WebSettings ws = browser.getSettings();
ws.setJavaScriptEnabled(true);
browser.addJavascriptInterface(new Object()
@JavascriptInterface // For API 17+
public void performClick(String strl)
Toast.makeText (MainActivity.this, strl, Toast.LENGTH_SHORT).show();
, "ok");
page.html 文件
<html>
<body>
First name: <input type="text" name="fname" id="txtfname"><br>
Last name: <input type="text" name="lname" id="txtlname"><br>
<script>
function getValues()
document.getElementById("btnOK").value = document.getElementById("txtfname").value+" "+document.getElementById("txtlname").value;
</script>
<button type="button" value="" id="btnOK" onclick="getValues();ok.performClick(this.value);">OK</button>
</body>
</html>【讨论】：
【参考方案5】：<b><button type = "button" value = "print" onclick="ok.performClick(this.value)" id="ok">PRINT</button></b>
webView.addJavascriptInterface( new Object()
@JavascriptInterface // For API 17+
public void performClick (String strl)
//performClick
, "ok" ) ;
【讨论】：
【参考方案6】：使用下面的 Android 代码和下面给出的 android 代码的 web 代码。 我已经实现了以下所有代码，并且在 android 版本 11 中运行良好
mWebView.loadUrl(outputResponse.getRedirectUserTo());
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient()
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result)
runOnUiThread(new Runnable()
@Override
public void run()
Intent returnIntent = new Intent();
returnIntent.putExtra("result",message);
setResult(Activity.RESULT_OK,returnIntent);
finish();
);
return true;
);
mWebView.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
view.loadUrl(url);
return true;
);
function validClick()
alert("Success");
background:#f2f2f2;
.payment
border:2px solid #01BD9A;
height:280px;
border-radius:20px;
background:#fff;
.payment_header
background:#01BD9A;
padding:20px;
border-radius:20px 20px 0px 0px;
.button_clk
background:#F55951;
padding:10px;
margin-top: 30;
border-radius:20px 20px 20px 20px;
.check
margin:0px auto;
width:50px;
height:50px;
border-radius:100%;
background:#fff;
text-align:center;
.check i
vertical-align:middle;
line-height:50px;
font-size:30px;
.content
text-align:center;
.content h1
font-size:25px;
padding-top:25px;
.content a
width:200px;
height:35px;
color:#fff;
border-radius:30px;
padding:5px 10px;
background:rgba(255,102,0,1);
transition:all ease-in-out 0.3s;
.content a:hover
text-decoration:none;
background:#000;
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto mt-5">
<div class="payment">
<div class="payment_header">
<div class="check"><i class="fa fa-check" aria-hidden="true"></i></div>
</div>
<div class="content">
<h1>Payment Success !</h1>
<div>
<button class="button_clk" type="button" id="ok" onclick="validClick();">Go Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>【讨论】：
以上是关于通过Android WebView中的javascript检测点击HTML按钮的主要内容，如果未能解决你的问题，请参考以下文章
通过@JavascriptInterface将字符串从Android传递给WebView中的JS
通过Android WebView中的javascript检测点击HTML按钮
通过Android WebView中的javascript检测点击HTML按钮