标签:
1、本地html与本地html里的js交互
2、本地html与本地js交互
3、网络html与网络js交互
4、网络html与本地js交互
5、各个情况动态添加js
以上5点都可以用一种方式来模拟,在本篇中采用本地html与本地js交互 (包含动态添加js的操作)
6、拦截url请求(在webview加载完成以后,触发的请求url)
7、拦截url请求后返回自己封装的数据(基于第6点,加载完成后,触发一些请求数据的url时拦截并自己封装数据返回给webview)
注:6、7点将在下一篇博客介绍
webview能做什么?此段引用vanezkw 感谢作者
1)、webView可以利用html做界面布局,虽然目前还比较少人这么使用,不过我相信当一些客户端需要复杂的图文(图文都是动态生成)混排的时候它肯定是个不错的选择。
2)、直接显示网页,这功能当然也是它最基本的功能。
3)、和js交互。(如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择)
首先在assets文件夹得有两个文件.html、.js
test.html
<body> <a href="http://www.baidu.com">js中调用本地方法</a> <script src="file:///android_asset/js.js"></script> <p></p> <div id="mydiv"> </div> </body>js.js
function funFromjs(){ document.getElementById("mydiv").innerHTML="获取id为mydiv的元素,并向其中添加文字!"; myObj.fun1FromAndroid("我的myObj回调"); }activity.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.yanqy.yqy_jsexample.MainActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="UI触发webview中的js" android:id="@+id/mButton" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> <WebView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/mWebView" android:layout_below="@+id/mButton" android:layout_centerHorizontal="true" /> </RelativeLayout>
MainActivity.xml
package com.yanqy.yqy_jsexample; import android.content.Context; import android.graphics.Color; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.Button; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private WebView mWebView; private Button mBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mBtn = (Button) findViewById(R.id.mButton); mWebView = (WebView) findViewById(R.id.mWebView); //设置编码 mWebView.getSettings().setDefaultTextEncodingName("utf-8"); //支持js mWebView.getSettings().setJavaScriptEnabled(true); //设置背景颜色 透明 mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0)); //设置本地调用对象及其接口 mWebView.addJavascriptInterface(new JavaScriptObject(this), "myObj"); //载入网页 mWebView.loadUrl("file:///android_asset/test.html"); //点击调用js中方法 mBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mWebView.loadUrl("javascript:funFromjs()"); } }); } final class JavaScriptObject { private Context mContxt; public JavaScriptObject(Context mContxt) { this.mContxt = mContxt; } @JavascriptInterface //sdk17版本以上加上注解 public void funFromAndroid(String name) { //在此可以通过js返回数据name进行操作 Toast.makeText(mContxt, "调用funFromAndroid:" + name, Toast.LENGTH_LONG).show(); } } }
test.xml 将<script></script>标签与其内容删除
<body> <a href="http://www.baidu.com">js中调用本地方法</a> <p></p> <div id="helloweb"> </div> </body>js.js 同第一点不变
function funFromjs(){ myObj.fun1FromAndroid("第一个js回调"); }MainActivity.java
需要读取js并添加到webview中才能达到添加js的效果
读取js添加到String 类型中
//js文本 private String wholeJS = "";
<span style="white-space:pre"> </span>//获取js文本 InputStream mIs = null; try { mIs = getResources().getAssets().open("js.js"); if(mIs != null){ byte buff[] = new byte[1024]; ByteArrayOutputStream fromFile = new ByteArrayOutputStream(); FileOutputStream out = null; do { int numread = 0; numread = mIs.read(buff); if (numread <= 0) { break; } fromFile.write(buff, 0, numread); } while (true); wholeJS = fromFile.toString(); }else{ Toast.makeText(MainActivity.this, "js加载失败", Toast.LENGTH_SHORT).show(); } } catch (IOException e) { e.printStackTrace(); }
mWebView.loadUrl("javascript:" + wholeJS);
package com.yanqy.yqy_jsexample; import android.content.Context; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.Button; import android.widget.Toast; import java.io.ByteArrayOutputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; public class MainActivity extends AppCompatActivity { private WebView mWebView; private Button mBtn; //js文本 private String wholeJS = ""; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mBtn = (Button) findViewById(R.id.mButton); mWebView = (WebView) findViewById(R.id.mWebView); //设置编码 mWebView.getSettings().setDefaultTextEncodingName("utf-8"); //支持js mWebView.getSettings().setJavaScriptEnabled(true); //设置背景颜色 透明 mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0)); //设置本地调用对象及其接口 mWebView.addJavascriptInterface(new JavaScriptObject(this), "myObj"); //载入网页 mWebView.loadUrl("file:///android_asset/test.html"); //点击调用js中方法 mBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //触发html中的js mWebView.loadUrl("javascript:funFromjs()"); } }); //获取js文本 InputStream mIs = null; try { mIs = getResources().getAssets().open("js.js"); if(mIs != null){ byte buff[] = new byte[1024]; ByteArrayOutputStream fromFile = new ByteArrayOutputStream(); FileOutputStream out = null; do { int numread = 0; numread = mIs.read(buff); if (numread <= 0) { break; } fromFile.write(buff, 0, numread); } while (true); wholeJS = fromFile.toString(); }else{ Toast.makeText(MainActivity.this, "js加载失败", Toast.LENGTH_SHORT).show(); } } catch (IOException e) { e.printStackTrace(); } //webview添加读取的js mWebView.loadUrl("javascript:" + wholeJS); } final class JavaScriptObject { private Context mContxt; public JavaScriptObject(Context mContxt) { this.mContxt = mContxt; } @JavascriptInterface //sdk17版本以上加上注解 public void funFromAndroid(String name) { //在此可以通过js返回数据name进行操作 Toast.makeText(mContxt, "调用funFromAndroid:" + name, Toast.LENGTH_LONG).show(); } } }
第6、7点将在下一篇博客介绍关于拦截 与 webview一些常用的监听事件
标签:
原文地址:http://blog.csdn.net/u012885461/article/details/51360808