WebView 및 JavaScript 상호 작용 기본 사항


이 섹션 소개:

이전 섹션에서는 Android의 WebView(웹 보기)를 연구했으며 WebView의 기본 사용법을 이해했다고 생각합니다.

이 섹션에서 배우고 싶은 내용은 다음과 같습니다. HTML -> JS ->Java HTML5 측과 Android 휴대폰 간의 통신을 완료합니다. 방문교환! 자, 더 이상 고민하지 말고 코드를 작성하여 이 미묘한 연결을 경험해 봅시다~

PS: 편의상 이 섹션에서 사용된 HTML은 파일 형식으로 자산 디렉토리에 배치됩니다. loadUrl("file:///android_asset/~")은 해당 HTML을 로드할 수 있습니다~

1. 핵심 단계 설명:

먼저, 데이터를 노출하는 클래스를 정의하고, JS는 메소드를 노출합니다. (Public) Android에 전화하세요!

Next에서는 WebView가 있는 페이지의 활동에서 다음 코드를 사용합니다.
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(object, "name");

그런 다음 js 또는 html에서 name.xxx를 호출하여 개체에 노출된 메서드를 호출합니다.

예: < input type="button" value="Toast Prompt" onclick="name.showToast('Hehe') ;"/>
또한 setJavaScriptEnabled는 Android 4.4 이전의 시스템
에서만 유효합니다! ! ! 다음 섹션에서는 Android 4.4 이상에 대해 설명하겠습니다. WebKit 변경 사항과 주의할 점!

2. 사용 예:

1) HTML은 JS

Running 렌더링을 통해 Toast 및 일반 목록의 대화 상자를 표시합니다. 파일을 자산 디렉토리에 배치합니다.

demo1.html

:

    Js调用Android
1.pngObject 개체를 사용자 정의하고 js는 이 클래스에서 노출된 메서드를 통해 Android를 호출합니다.2.png

MyObject.java:

/**
 * Created by Jay on 2015/9/11 0011.
 */
public class MyObject {
    private Context context;
    public MyObject(Context context) {
        this.context = context;
    }

    //将显示Toast和对话框的方法暴露给JS脚本调用
    public void showToast(String name) {
        Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
    }

    public void showDialog() {
        new AlertDialog.Builder(context)
                .setTitle("联系人列表").setIcon(R.mipmap.ic_lion_icon)
                .setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null)
                .setPositiveButton("确定", null).create().show();
    }
}

마지막으로 It

MainActivity.java

이고, JavaScript 지원을 활성화한 다음 addJavascriptInterface를 통해 개체를 노출합니다~

public class MainActivity extends AppCompatActivity {
    private WebView wView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wView = (WebView) findViewById(R.id.wView);
        wView.loadUrl("file:///android_asset/demo1.html");
        WebSettings webSettings = wView.getSettings();
        //①设置WebView允许调用js
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("UTF-8");
        //②将object对象暴露给Js,调用addjavascriptInterface
        wView.addJavascriptInterface(new MyObject(MainActivity.this), "myObj");
    }
}
2) HTML은 JS

렌더링 실행

을 통해 세 가지 다른 대화 상자를 호출합니다.

구현 코드

：

먼저 html 파일을 자산 디렉토리에 넣으세요:

demo2.html

：

    <meta http-equiv = "Content-Type" content="text/html;charset=UTF-8"
    测试Js的三种不同对话框            function alertFun()
        {
            alert("Alert警告对话框!");
        }
        function confirmFun()
        {
            if(confirm("访问百度?"))
            {location.href = "http://www.baidu.com";}
            else alert("取消访问!");
        }
        function promptFun()
        {
            var word = prompt("Prompt对话框","请输入点什么...:");
            if(word)
            {
                alert("你输入了:"+word)
            }else{alert("呵呵,你什么都没写!");}
        }
←
→