Android 与 js 交互

最新推荐文章于 2024-07-24 11:23:56 发布

美女婕

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量197

点赞数

分类专栏： Android与js 交互

本文链接：https://blog.csdn.net/qq_38913065/article/details/73849480

版权

Android与js 交互专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 
  
 Android原生调用js代码 

 
 1. 在 
 activity_main中，定义一个webView，在MainActivity中 
 WebView 
 添加 js支持 
 getSettings().setJavaScriptEnabled( 
 true 
 ); 

2.然后 .loadUrl(); 就可以加载布局了

assets下的代码：test.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Android与JS交互</title>
   <script type="text/javascript">
      function test(str) {
         document.getElementById("content").innerHTML=str;
      }

      function callRes() {
         var imgSrcs = "";
         var imgs = document.getElementsByTagName("img");
         for(var i = 0; i < imgs.length; i++) {
            imgSrcs += imgs[i].src;
            if(i < imgs.length-1) {
               imgSrcs += "|";
            }
         }
         window.android.callAndroid(imgSrcs);
      }

      function getIndex(index){
         window.android.getIndex(index);
      }
   </script>
</head>
<body οnlοad="callRes()">
   <div>
      这是一条神奇的天路  
   </div>
   <div id="content">
         
   </div>
   <img οnclick="getIndex(0)" src="http://pic.58pic.com/58pic/14/27/45/71r58PICmDM_1024.jpg" width="100%" />
   <img οnclick="getIndex(1)" src="http://pic17.nipic.com/20111122/6759425_152002413138_2.jpg" width="100%" />
   <img οnclick="getIndex(2)" src="http://pic10.nipic.com/20100929/4308872_150108084472_2.jpg" width="100%" />
</body>
</html>

代码块：

HackyViewPager:
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class HackyViewPager extends ViewPager {
   
    public HackyViewPager(Context context) {
        super(context);
    }

    public HackyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
      try {
         return super.onInterceptTouchEvent(ev);
      } catch (IllegalArgumentException e) {
         return false;
      }
    }
}
MainActivity:
import android.content.Intent;
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.WebView;
import android.widget.Button;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private WebView mWebView;
    private Button mJs;
    private ArrayList<String> images;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.web_view);
        mJs = (Button) findViewById(R.id.js_jiaohu);
        images=new ArrayList<>();
        //添加js支持
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/test.html");

        mWebView.addJavascriptInterface(this, "android");
        mJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Android原生调用js代码
                mWebView.loadUrl("javascript:test('liujie刘婕最棒')");
            }
        });
    }
        @JavascriptInterface
        public void callAndroid(final String text){
            // 给Js提供接口，传过所有图片的url
            Log.i(TAG, "callAndroid: " + text);
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    // 图片用"|"隔开，遍历传过来的图片url集合，解析出其中的真实图片url
                    if (!TextUtils.isEmpty(text)) {
                        if (text.contains("|")) {
                            String[] imgs = text.split("\\|");
                            if (imgs != null) {
                                for (String img : imgs) {
                                    images.add(img);
                                }
                            }
                        }
                    }
                }
            });
        }
    @JavascriptInterface
    public void getIndex(final int index) {
        // 给JS提供的接口，传过点击的图片的索引位置
        Log.i(TAG, "getIndex: " + index);
        Intent intent = new Intent(MainActivity.this, PhotoActivity.class);
        intent.putStringArrayListExtra("imgs", images);
        intent.putExtra("index", index);
        startActivity(intent);
    }
}
PhotoActivity:
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import com.bumptech.glide.Glide;
import java.util.ArrayList;
import uk.co.senab.photoview.PhotoView;
import uk.co.senab.photoview.PhotoViewAttacher;

public class PhotoActivity extends AppCompatActivity {
    private ArrayList<String> images;
    private int index = 0;
    private HackyViewPager mPhotoview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_photo);
        Intent intent = getIntent();
        images = intent.getStringArrayListExtra("imgs");
        if (null == images) {
            images = new ArrayList<>();
        }
        index = intent.getIntExtra("index", 0);
        mPhotoview = (HackyViewPager) findViewById(R.id.photoview);
        mPhotoview.setAdapter(new PagerAdapter() {
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                PhotoView photoView = new PhotoView(container.getContext());
                Glide.with(container.getContext()).load(images.get(position)).into(photoView);
                //点击事件
                photoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
                    @Override
                    public void onPhotoTap(View view, float x, float y) {
                        Log.i("--------------", "onPhotoTap: x =" + x +"  y = " + y);
                    }
                });
                container.addView(photoView);
                return photoView;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }

            @Override
            public int getCount() {
                return images.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
        });
        mPhotoview.setCurrentItem(index);
    }
    }
activity_main中:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
   >
    <Button
        android:id="@+id/js_jiaohu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="调用js代码"/>
<WebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></WebView>
</LinearLayout>