public class MainActivity extends AppCompatActivity { ProgressBar mProgressBar; WebView mWebView; //第二步 定义JAVAScript交互接口 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mProgressBar = (ProgressBar) findViewById(R.id.http_progressbar); mWebView = (WebView) findViewById(R.id.http_webview); setJavascriptInterface(); setWebVieClient(); loadData(); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) { mWebView.goBack();// 返回前一个页面 return true; } return super.onKeyDown(keyCode, event); } public void setWebVieClient(){ mWebView.setWebViewClient(new WebViewClient(){ /** * 请求的url嵌入webview显示 */ @Override public boolean shouldOverrideUrlLoading(WebView webview, String url) { webview.loadUrl(url); return true; } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); } }); mWebView.setWebChromeClient(new WebChromeClient(){ @Override public void onProgressChanged(WebView view, int newProgress) { super.onProgressChanged(view, newProgress); Logs.e("onProgressChanged :"+newProgress); mProgressBar.setProgress(newProgress); if(newProgress == 100){ mProgressBar.setVisibility(newProgress); } } }); } /** * 设置javaScript与android原生应用交互接口 */ public void setJavascriptInterface() { //第一步 设置javascript 可用 mWebView.getSettings().setJavaScriptEnabled(true); //第三步 添加javaScript交互接口到webview MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface() { @JavascriptInterface public void showToast() { Logs.e("showToast"); startActivity(new Intent(MainActivity.this, Come_Activity.class)); } @Override public String htmlToNativeToJs() { Logs.e("htmlToNativeToJs"); return "http://it.warmtel.com"; } }; /** * WebView.addJavascriptInterface(Object,String)方法 * Object 交互接口对象 * String 交互接口名称 */ mWebView.addJavascriptInterface(myJavaScriptInterface, "MyJavaScriptInterface"); } /** * webView加载数据三种方式 */ public void loadData() { // mWebView.loadUrl("http://192.168.5.5:8080/webapp/login.html"); mWebView.loadUrl("http://192.168.5.10/serv-app/langyabang.html"); // mWebView.loadDataWithBaseURL(null,"<html><body><h1>你好 loadDataWithBaswUrl</h1></body></html>","text/html","UTF-8",null); } interface MyJavaScriptInterface { void showToast(); String htmlToNativeToJs(); } }
<head>
<title>琅琊榜</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes">
<!--<meta name="viewport" content="width=640, initial-scale=0.5,maximum-scale=0.5" />-->
<meta name="apple-mobile-web-app-capable" content="YES">
<link rel="stylesheet" href="mycss.css" type="text/css" />
<style type="text/css">
.bz{
width: 320px;
margin-left: -10px;
margin-right: -10px;
min-height: 385px;
border:4px #BCBDC0 solid;
background-image:url(lyb.jpg);
background-repeat:no-repeat;
background-position:center;
}
.divstory{
margin-left:20px;
margin-top:1px;
}
.actor{
margin-left:40px;
margin-top:5px;
}
</style>
<script>Java scirpt 语言的function方法,类似于swich - case语法
function mylog()
{
//alert("Hello World!");
//var url = window.MyJavaScriptInterface.htmlToNativeToJs();接口定义的方法
//window.location.href = url; //跳转到指定url
//window.MyJavaScriptInterface.showToast();
window.location.href = "http://192.168.5.10/serv-app/story.html"; //跳转到指定url
}
function myFunction()
{
window.MyJavaScriptInterface.showToast();
}
function seevidio()
{
window.location.href = "http://www.le.com/ptv/vplay/23544897.html?ch=baidu_v&frp=v.baidu.com%2Fv&vfm=bdvppzq";
}
function huge()
{
window.location.href = "http://192.168.5.10/serv-app/胡歌.html"
}
</script>
</head>
<body bgcolor="#C6CDD3">
<div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#C6CDD3">
<div class="bz">
</div>
<div class="divstory" >
<button οnclick="mylog()">故事情节</button>
<button οnclick="myFunction()">人物设定</button>
<button οnclick="seevidio()">点击观看</button>
</div>
<div class="actor">
<img οnclick="huge()" src="hg.jpg"/>
<img src="wangkai.jpg"/>
<img src="liutao.jpg"/>
<img src="feiliu.jpg"/>
<img src="moushi.jpg"/>
</div>
</div>
</body>
</html>
xml文档
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ProgressBar android:id="@+id/http_progressbar" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal" android:max="100" /> <WebView android:id="@+id/http_webview" android:layout_below="@id/http_progressbar" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RelativeLayout>