欢迎来到皮皮网官网
1.JSBridge原理解析——以WebviewJavascriptBridge实现方式为例
2.Android 在WebView中通过javascript获取网页源码，获取获并在TextView或者在EditText中显示问题
JSBridge原理解析——以WebviewJavascriptBridge实现方式为例
JSBridge是源源码一种webview与native端进行通信的手段。通过JSBridge，网页webview可以通过jsb调用native的获取获高端收费私人订制指标源码能力，而native端也可以通过jsb在webview上执行逻辑。源源码以WebviewJavascriptBridge为例，网页解析其实现方式：
在JSBridge中，获取获主要通过拦截URL请求实现native端与webview端的源源码通信效果。WebviewJavascriptBridge是网页一个较为流行的实现方式，其源码地址为：github.com/marcuswesti...
实现JSBridge的获取获关键步骤包括：
1. 注册Bridge：在webview侧和native侧分别注册bridge，通过一个对象储存所有函数。源源码智能钢琴源码
2. 初始化代码注入：在webview内部注入初始化代码，网页此代码执行关键操作。获取获
3. 监听URL请求：在iOS中，源源码如WKWebview，网页监听URL请求进行相关处理。byte类型源码
4. webview调用native能力：当webview与native端注册桥后，双方可以互相调用。具体过程包括webview调用、native接收、执行响应。github源码源
5. native调用webview能力：与webview调用相反，native主动调用JS侧方法。
具体步骤如下：
2-4-1：webview侧调用native，通过callHandler生成message并推入队列，更改iframe src。traits编程源码
2-4-2：native侧处理消息队列，检测iframe src变化，执行WKFlushMessageQueue获取message。
2-4-3：webview侧处理来自native的消息，根据responseId执行回调函数。
过程总结如下图所示。
通过这种方式，JSBridge实现了webview与native端的高效通信，为跨平台应用提供了便利。
Android 在WebView中通过javascript获取网页源码，并在TextView或者在EditText中显示问题
webview js之间的交互，项目中马上用到。JS调用java代码效果图
java代码调用javasrcipt代码效果图
index.html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.//EN" ""
});
function sendInfoToJava(){
window.AndroidWebView.showInfoFromJs(share);
}
<!--在android代码中调用此方法-->
function showInfoFromJava(msg){
alert("showInfoFromJava："+msg);
} </script></head><body la><div id='b'> <input onclick="sendInfoToJava()" type="button" value="sendInfoToJava"/></div></body></html>
布局代码:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.chenjifang.webview.MainActivity"> <Button android:id="@+id/test_btn" android:text="代码中调用web js代码传递参数" android:layout_width="match_parent" android:layout_height="wrap_content" /> <EditText android:id="@+id/test_edt" android:layout_width="match_parent" android:layout_height="wrap_content" /><WebView android:id="@+id/test_webview" android:layout_width="match_parent" android:layout_height="dp"></WebView></LinearLayout>
java代码:
public class MainActivity extends AppCompatActivity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.test_webview); //设置WebView支持JavaScript mWebView.getSettings().setJavaScriptEnabled(true); mWebView.loadUrl("file:///android_asset/index.html"); mWebView.addJavascriptInterface(new JsInterface(this), "AndroidWebView"); //添加客户端支持 mWebView.setWebChromeClient(new WebChromeClient()); findViewById(R.id.test_btn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) {
sendInfoToJs(); }
}); } private class JsInterface { private Context mContext; public JsInterface(Context context) { this.mContext = context; } //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。 @JavascriptInterface public void showInfoFromJs(String share) {
Toast.makeText(mContext, share, Toast.LENGTH_SHORT).show(); }
} //在java中调用js代码 public void sendInfoToJs() {
String msg = ((EditText)findViewById(R.id.test_edt)).getText().toString(); //调用js中的函数：showInfoFromJava(msg) mWebView.loadUrl("javascript:showInfoFromJava('" + msg + "')"); }
总结下，java代码中要设置webview对javascript的支持，addJavascriptInterface(new JsInterface(this), "AndroidWebView");//这句代码中的第二个参数是在js访问方法的地址。
window.AndroidWebView.showInfoFromJs(share);
