背景
工作需要，花了2个小时 写了段一个native与html交互的简单程序。不了解html相关文档。果然就是浪费时间。找文档就要蛮久。费劲。。。写个博文记录一下。
Demo功能实现：
1. 实现一个activity加载帮助页
2. 帮助页有二级子页面
3. 按back键支持返回页面返回退出
实现步骤：
一、加载帮助页
Activity部分
public class Test2 extends Activity {
private boolean isRoot = true;
......
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_oshelp);
......
webview = (WebView) findViewById(R.id.web_view);
String fileUrl = "file:///android_asset/index.html";
//#webview的javascript默认是关闭的，必须要声明开启
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(new Object(){//#这里的Object可以随意命名
//#@JavascriptInterface必须要有
因为安全问题，在Android4.2中(如果应用的android:targetSdkVersion数值为17+)JS只能访问带有@JavascriptInterface注解的Java函数。
之前，任何Public的函数都可以在JS代码中访问，而Java对象继承关系会导致很多Public的函数都可以在JS中访问，其中一个重要的函数就是 getClass()。然后JS可以通过反射来访问其他一些内容。通过引入@JavascriptInterface注解，则在JS中只能访问@JavascriptInterface注解的函数。这样就可以增强安全性。
如果您的应用android:targetSdkVersion数值为17或者大于17记得添加@JavascriptInterface 注解。
@JavascriptInterface
public void exitHelp(){
Toast.makeText(Test2.this, "exitHelp", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void attachRoot(){
isRoot = true;
}
@JavascriptInterface
public void unAttachRoot(){
isRoot = false;
}
}, "exitHelpAndroid");//#exitHelpAndroid定义了js调用的android的结构体，而这些注解过的函数就是具体方法
webview.loadUrl(fileUrl);
webview.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
});
webview.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
String fileUrl = "file:///android_asset/os_help.html";
webview.loadUrl(fileUrl);
}
});
}
......
public void onBackPressed() {
if (webview.canGoBack() && !isRoot) {
webview.goBack();
} else {
super.onBackPressed();
}
}
}
Index.xml部分
<!DOCTYPE html>
<html lang="en">
......
<body>
......
<div class="container">
<ul>
<li>
<a href="javascript:exitHelp()">
<img src="images/icon_01.png" alt="">
<p>新手功能介绍</p>
</a>
</li>
<li>
<a href="use_treadmill.html">
<img src="images/icon_02.png" alt="">
<p>使用跑步机须知</p>
</a>//#这种东西有多个，就不多写了
</li>
.......
</ul>
</div>
........
<script type="text/javascript">
function exitHelp(){
if(exitHelpAndroid){
exitHelpAndroid.exitHelp();
}
}
function attachRoot() {
if(exitHelpAndroid){
exitHelpAndroid.attachRoot();
}
}
window.οnlοad=function () {
attachRoot();
}
function unAttachRoot() {
if(exitHelpAndroid){
exitHelpAndroid.unAttachRoot();
}
}
window.onunload =function () {
unAttachRoot();
}
</script>
</body>
</html>
附录：
在调试过程中，需要用到的window状态链接如下：
http://www.w3school.com.cn/jsref/dom_obj_event.asp
事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使HTML 事件触发浏览器中的行为，比如当用户点击某个HTML 元素时启动一段JavaScript。下面是一个属性列表，可将之插入HTML 标签以定义事件的行为。
| 属性 | 此事件发生在何时... |
| 图像的加载被中断。 | |
| 元素失去焦点。 | |
| 域的内容被改变。 | |
| 当用户点击某个对象时调用的事件句柄。 | |
| 当用户双击某个对象时调用的事件句柄。 | |
| 在加载文档或图像时发生错误。 | |
| 元素获得焦点。 | |
| 某个键盘按键被按下。 | |
| 某个键盘按键被按下并松开。 | |
| 某个键盘按键被松开。 | |
| 一张页面或一幅图像完成加载。 | |
| 鼠标按钮被按下。 | |
| 鼠标被移动。 | |
| 鼠标从某元素移开。 | |
| 鼠标移到某元素之上。 | |
| 鼠标按键被松开。 | |
| 重置按钮被点击。 | |
| 窗口或框架被重新调整大小。 | |
| 文本被选中。 | |
| 确认按钮被点击。 | |
| 用户退出页面。 |
1661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
