webview和js交互

WebView 和 JavaScript 交互是指在 WebView（一种嵌入在应用程序中的浏览器视图）中加载网页时，通过 JavaScript 与原生应用程序代码进行通信和数据交换的能力。

基础概念：

• WebView 是一个可以加载网页内容的组件，常用于移动应用开发中。
• JavaScript 是一种在浏览器中执行的脚本语言，用于实现网页的动态交互效果。

优势：

1. 用户体验增强：允许网页内容与原生应用的功能无缝结合，提供更丰富的用户体验。
2. 代码复用：可以在多个平台上重用现有的网页代码，减少开发成本。
3. 灵活性：开发者可以根据需要灵活地调用原生功能或更新网页内容。

类型：

1. 原生调用 JavaScript：原生代码执行 JavaScript 代码。
2. JavaScript 调用原生：网页中的 JavaScript 代码调用原生方法。

应用场景：

• 在移动应用中嵌入网页内容，如新闻阅读器、社交媒体应用中的分享功能。
• 实现网页与原生应用的登录状态同步。
• 在网页中调用设备的摄像头、地理位置等原生功能。

常见问题及解决方法：

1. JavaScript 接口未定义：
   • 原因：可能是在 WebView 中没有正确启用 JavaScript 或者没有正确设置 JavaScript 接口。
   • 解决方法：确保在 WebView 设置中启用了 JavaScript，并且正确添加了 JavaScript 接口。

• 跨域问题：
  • 原因：浏览器的同源策略限制了网页脚本与不同源的资源交互。
  • 解决方法：在服务器端设置 CORS（跨源资源共享）策略，允许 WebView 中的网页访问特定的资源。
• 数据格式不一致：
  • 原因：原生代码与 JavaScript 代码之间传递的数据格式不匹配。
  • 解决方法：确保双方使用相同的数据格式（如 JSON）进行数据交换，并正确解析。

示例代码（以 Android 为例）：

原生调用 JavaScript：

webView.evaluateJavascript("javascript:alert('Hello from Android')", null);

JavaScript 调用原生： 首先，在 Android 中设置 JavaScript 接口：

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

然后，在网页中的 JavaScript 代码中调用：

window.Android.showToast("Hello from JavaScript");

确保在使用 addJavascriptInterface 时，是在 API 级别 17 及以上，并且使用 @JavascriptInterface 注解来标记可以被 JavaScript 调用的方法，以保证安全性。