一.Activity中使用
1.创建html文件（可以放在assest中）
<!doctype html> <html> <head> <!-- 设置当前HTML文件的字符编码 --> <meta charset="utf-8"> <!-- 设置浏览器的兼容模式版本 （让IE使用最新的渲染引擎工作） --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 声明当前网页在移动端浏览器中展示的相关设置 --> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> 这里是HTML <br/> <h1><div id="content">HTML内容显示</div></h1> <br/> <input type="button" value="调用android代码" onclick="window.android.startFunction()" /> <br/> <input type="button" value="调用android代码并传递参数" onclick="window.android.startFunction(‘这里是js调用Android方法‘)" /> </body> </html>
2.Activity_main.xml布局(只需要一个WebView控件即可)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="myapplication.com.myhtml.MainActivity"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
3.MainActivity.java
1 public class MainActivity extends AppCompatActivity { 2 private WebView contentWebView = null; 3 4 5 @Override 6 protected void onCreate(Bundle savedInstanceState) { 7 super.onCreate(savedInstanceState); 8 setContentView(R.layout.activity_main); 9 contentWebView = (WebView) findViewById(R.id.webview); 10 // 启用javascript 11 contentWebView.getSettings().setJavaScriptEnabled(true); 12 // 从assets目录下面的加载html 13 contentWebView.loadUrl("file:///android_asset/b.html"); 14 contentWebView.addJavascriptInterface(MainActivity.this,"android"); 15 16 17 } 18 19 //由于安全原因 需要加 @JavascriptInterface 20 @JavascriptInterface 21 public void startFunction(){ 22 23 runOnUiThread(new Runnable() { 24 @Override 25 public void run() { 26 Toast.makeText(MainActivity.this,"Toast",Toast.LENGTH_SHORT).show(); 27 28 } 29 }); 30 } 31 32 @JavascriptInterface 33 public void startFunction(final String text){ 34 runOnUiThread(new Runnable() { 35 36 @Override 37 public void run() { 38 new AlertDialog.Builder(MainActivity.this).setMessage(text).show(); 39 40 } 41 }); 42 43 44 } 45 }
参考:https://www.cnblogs.com/galibujianbusana/p/6511249.html
二.Fragment中使用
1 public View onCreateView(LayoutInflater inflater, ViewGroup container, 2 Bundle savedInstanceState) { 3 contentView = inflater.inflate(R.layout.fragment_web, container, false); 4 web_view = (WebView)contentView.findViewById(R.id.webview); 5 initView(); 6 web_view.loadUrl(url); 7 //web_view.loadUrl("file:///android_asset/Demo.html"); 8 web_view.setWebViewClient(new WebViewClient()); 9 10 mProgressBar = (ProgressBar)contentView.findViewById(R.id.progressbar); 11 12 web_view.setWebChromeClient(new WebChromeClient(){ 13 @Override 14 public void onProgressChanged(WebView view, int newProgress) { 15 if (newProgress != 100) { 16 mProgressBar.setProgress(newProgress); 17 } else { 18 mProgressBar.setVisibility(View.GONE); 19 } 20 } 21 }); 22 23 24 25 // Inflate the layout for this fragment 26 return contentView; 27 } 28 29 30 31 设置显示： 32 33 private void initView() { 34 WebSettings setting = web_view.getSettings(); 35 setting.setJavaScriptEnabled(true);//支持Js 36 setting.setCacheMode(WebSettings.LOAD_DEFAULT);//缓存模式 37 //是否支持画面缩放，默认不支持 38 setting.setBuiltInZoomControls(true); 39 setting.setSupportZoom(true); 40 //是否显示缩放图标，默认显示 41 setting.setDisplayZoomControls(false); 42 //设置网页内容自适应屏幕大小 43 setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);//注意网上例程很多的是.SINGLE_COLUMN，但调试时发现移动版网站会错位，所以改成 44 //SINGLE_COLUMN 45 46 setting.setUseWideViewPort(true); 47 setting.setLoadWithOverviewMode(true); 48 49 }
参考:https://blog.csdn.net/gaoweiweiw/article/details/77574062