1.
- <!DOCTYPE html>
- <html style="min-height: 100%">
- <head>
- <meta charset="utf-8">
- <title>Carson_Ho</title>
- <style>
- * {
- margin: 0px;
- border: 1px solid red;
- }
- html,body{
- width: 90%;
- height: 90%;
- }
- #divTop {
- position: relative;
- height: 50%;
- background: #ff8888;
- bottom: 0;
- }
- #divBottom{
- display: flex;
- flex-direction: column;
- position: relative;
- height: 50%;
- background: #997777;
- }
- .btn3 {
- flex: 1;
- bottom: 0;
- }
- .in {
- bottom: 0;
- }
- </style>
- // JS 代码
- <script>
- // Android 需要调用的方法
- function callJS(){
- document.getElementById("test").innerHTML = "android button 点击左边 实现'webView.loadUrl('javascript:callJS()');'就可以响应";
- alert("Android 调用了 JS 的 callJS 方法 实现'webView.setWebChromeClient'才有响应");
- return "JS 函数 callJS 的返回值";
- }
- function callAndroid(){
/* 约定的 url 协议为: js://webview?arg1=111&arg2=222*/
- document.location = "js://webview?arg1 = 参数一 & arg2 = 参数 2";
- }
- function clickprompt(){
- // 调用 prompt()
- var result = prompt("js://demo?arg1 = 调用 clickprompt&arg2=222");
- alert("prompt 弹出输入的值:" + result);
- }
- </script>
- </head>
- <body>
- <div id="divTop">
- <div id="test"> 0000000000 </div>
- <button onclick="callAndroid()"> 点击使用 callAndroid 函数 </button>
- <button onclick="clickprompt()"> 点击调用 clickprompt 函数 </button>
- </div>
- <div id="divBottom">
- <button class="btn3"> 按钮 </button>
- <input class="in" value="test"/>
- </div>
- </body>
- </html>
- 2.
- public class MainActivity extends Activity {
- WebView webView;
- Button buttonLeft, buttonRight;
- EditText editText;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- webView = findViewById(R.id.webview);
- buttonLeft = findViewById(R.id.btnLeft);
- buttonRight = findViewById(R.id.btnRight);
- editText = findViewById(R.id.edittext);
- WebSettings webSettings = webView.getSettings();
- // 允许使用 JS
- webSettings.setJavaScriptEnabled(true);
- // 设置允许 JS 弹窗
- webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
- webView.loadUrl("file:///android_asset/index.html");
- buttonLeft.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View view) {
- webView.post(new Runnable() {
- @Override
- public void run() {
- webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
- @Override
- public void onReceiveValue(String s) {
- // 将 button 显示的文字改成 JS 返回的字符串
- buttonLeft.setText(s);
- }
- });
- }
- });
- }
- });
- webView.setWebViewClient(new WebViewClient() {
- @Override
- public boolean shouldOverrideUrlLoading(WebView view, String url) {
- //1. 根据协议的参数, 判断是否是所需要的 url
- // 一般根据 scheme(协议格式) & authority(协议名) 判断 (前两个参数)
- // 假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)
- Uri uri = Uri.parse(url);
- // 如果 url 的协议 = 预先约定的 js 协议
- // 就解析往下解析参数
- if (uri.getScheme().equals("js"))
- {
- // 如果 authority = 预先约定协议里的 webview, 即代表都符合约定的协议
- // 所以拦截 url, 下面 JS 开始调用 Android 需要的方法
- if(uri.getAuthority().equals("webview"))
- {
- // 执行 JS 所需要调用的逻辑
- editText.setText(uri.getQueryParameter("arg1"));
- }
- return true;
- }
- return super.shouldOverrideUrlLoading(view, url);
- }
- });
- webView.setWebChromeClient(new WebChromeClient() {
- @Override
- public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
- // 拦截输入框
- // 参数 message: 代表 promt() 的内容 (不是 url)
- // 参数 result: 代表输入框的返回值
- // 根据协议的参数, 判断是否是所需要的 url
- // 一般根据 scheme(协议格式) & authority(协议名) 判断 (前两个参数)
- // 假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)
- Uri uri = Uri.parse(url);
- if(uri.getScheme().equals("js"))
- {
- if(uri.getAuthority().equals("demo"));
- {
- result.confirm("js 调用了 Android 的方法成功啦");
- return true;
- }
- }
- return super.onJsPrompt(view, url, message, defaultValue, result);
- }
- @Override
- public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
- AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
- b.setTitle("alert1");
- b.setMessage(message);
- b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
- @Override
- public void onClick(DialogInterface dialogInterface, int i) {
- result.confirm();
- }
- });
- b.setCancelable(false);
- b.create().show();
- return true;
- }
- });
- }
- }
- 3
- <?xml version="1.0" encoding="utf-8"?>
- <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:context=".MainActivity">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:layout_editor_absoluteX="136dp"
- tools:layout_editor_absoluteY="0dp"
- android:orientation="vertical"
- tools:ignore="MissingConstraints">
- <WebView
- android:id="@+id/webview"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_weight="1">
- </WebView>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="horizontal"
- android:layout_weight="3">
- <Button
- android:id="@+id/btnLeft"
- android:layout_weight="1"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:text="左边" />
- <EditText
- android:id="@+id/edittext"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_weight="1"
- android:gravity="center"
- android:text="0"/>
- <Button
- android:id="@+id/btnRight"
- android:layout_weight="1"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:text="右边" />
- </LinearLayout>
- </LinearLayout>
- </android.support.constraint.ConstraintLayout>
来源: http://www.bubuko.com/infodetail-2754671.html