---恢复内容开始---

1.通过WebView加载Html界面。在android studio中html放在assets中。

但是默认的并不存在这个文件夹,创建过程是

2.创建后简单实现下,js调用android中的方法。过onclick="window.android.startFunction()" window.android.方法名 调用android方法

  <1>创建html文件 橘黄色为适配手机屏幕代码

<!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> Main布局只有一个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>Main代码

public class MainActivity extends AppCompatActivity {
private WebView contentWebView = null; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contentWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
contentWebView.loadUrl("file:///android_asset/b.html");
contentWebView.addJavascriptInterface(MainActivity.this,"android"); } //由于安全原因 需要加 @JavascriptInterface
@JavascriptInterface
public void startFunction(){ runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this,"Toast",Toast.LENGTH_SHORT).show(); }
});
} @JavascriptInterface
public void startFunction(final String text){
runOnUiThread(new Runnable() { @Override
public void run() {
new AlertDialog.Builder(MainActivity.this).setMessage(text).show(); }
}); }
}

其实现效果图:

3 android 调用html js方法  

  <1> Html文件如下,script中有二个方法,共android中调用。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript"> function javacalljs(){
document.getElementById("content").innerHTML =
"<br\>JAVA调用了JS的无参函数";
} function javacalljswith(arg){
document.getElementById("content").innerHTML =
("<br\>"+arg);
}
</script>

</head>
<body>
这里是HTML <br/>
<h1><div id="content">内容显示</div></h1>
<br/>
<input type="button" value="点击调用java代码" onclick="window.android.startFunction()" />
<br/>
<input type="button" value="点击调用java代码并传递参数" onclick="window.android.startFunction('http://blog.csdn.net/Leejizhou')" />
</body>
</html>

  <2>通过webView.loadUrl("javascript:方法名"); 来调用js中的方法。

public class MainActivity extends AppCompatActivity {
private WebView contentWebView = null; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contentWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
contentWebView.loadUrl("file:///android_asset/b.html");
contentWebView.addJavascriptInterface(MainActivity.this,"android"); //无参调用Js点击
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 无参数调用
contentWebView.loadUrl("javascript:javacalljs()"); }
});
//有参调用Js点击
findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 传递参数调用
contentWebView.loadUrl("javascript:javacalljswith(" + "'这里是调用js方法'" + ")");
}
}); }

实现图如下:

4.code      

http://pan.baidu.com/s/1pK9u7MV   工作--新文件--myhtml

Android和Html的简单交互的更多相关文章

  1. android json解析及简单例子+Android与服务器端数据交互+Android精彩案例【申明:来源于网络】

    android json解析及简单例子+Android与服务器端数据交互+Android精彩案例[申明:来源于网络] android json解析及简单例子:http://www.open-open. ...

  2. Android客户端和服务器端数据交互

    网上有很多例子来演示Android客户端和服务器端数据如何实现交互不过这些例子大多比较繁杂,对于初学者来说这是不利的,现在介绍几种代码简单.逻辑清晰的交互例子,本篇博客介绍第四种: 一.服务器端: 代 ...

  3. Android客户端与服务端交互之登陆示例

    Android客户端与服务端交互之登陆示例 今天了解了一下android客户端与服务端是怎样交互的,发现其实跟web有点类似吧,然后网上找了大神的登陆示例,是基于IntentService的 1.后台 ...

  4. 我的Android进阶之旅】GitHub 上排名前 100 的 Android 开源库进行简单的介绍

    GitHub Android Libraries Top 100 简介 本文转载于:https://github.com/Freelander/Android_Data/blob/master/And ...

  5. Xamarin.Android之封装个简单的网络请求类

    一.前言 回忆到上篇 <Xamarin.Android再体验之简单的登录Demo> 做登录时,用的是GET的请求,还用的是同步, 于是现在将其简单的改写,做了个简单的封装,包含基于Http ...

  6. [电子书] 《Android编程入门很简单》

    <Android编程入门很简单>是一本与众不同的Android学习读物,是一本化繁为简,把抽象问题具体化,把复杂问题简单化的书.本书避免出现云山雾罩.晦涩难懂的讲解,代之以轻松活泼.由浅入 ...

  7. [原创]Android中LocationManager的简单使用,获取当前位置

    Android中LocationManager的提供了一系列方法来地理位置相关的问题,包括查询上一个已知位置:注册/注销来自某个 LocationProvider的周期性的位置更新:以及注册/注销接近 ...

  8. cocos2d-x lua与c++简单交互

    cocos2d-x lua与c++简单交互 version: cocos2d-x 3.6 本文讲述lua与c++的一些简单交互: lua通过消息方式调用c++无参接口 c++调用lua带参接口 1.通 ...

  9. android code 和js的交互

    小弟现在需要android code 和js的交互.出现了问题,求大家带一带啊. 我的页面:<!DOCTYPE html><html lang="en">& ...

随机推荐

  1. 模拟试题C

    模拟试题C 一.单项选择题(2′*14 =28′) 1.双线性法向插值法(Phong Shading)的优点是( ) A)法向计算精确 B)高光域准确 C)对光源和视点没有限制 D)速度较快 2.用编 ...

  2. CorelDRAW最高立返500元!还剩30个名额!速抢!

    由于上月CDR X7返利活动收获众多好评 本月官方继续将活动进行到底! 而此次活动不但有上月意犹未尽的CDR X7版,更增加了CDR X6.CDR 2017以及可望不可即的CDR 2018版,可谓是优 ...

  3. 图片放大不失真软件PhotoZoom的工具栏

    PhotoZoom是一款极其简单的图片无损放大工具,简单几即可渲染出完美的放大照片,呈现无与伦比的画质效果.虽然简单,菜单和面板的功能很少,但却是设计师的必备神器,因为其简单易用性,它的软件菜单命令和 ...

  4. Java中 ArrayList类的使用

    java.util.ArrayList 是大小可变的数组的实现,存储在内的数据称为元素.此类提供一些方法来操作内部存储 的元素. ArrayList 中可不断添加元素,其大小也自动增长. ArrayL ...

  5. 面试官:精通 Mybatis?请回答下这几个问题

    点关注,不迷路:持续更新Java架构相关技术及资讯热文!!! Mybatis是现在非常主流的持久层框架,虽然平时用的多,但是其中几个细节的问题,能说出个所以然来不? 一.最常见,参数中 #{} 和 $ ...

  6. Everything Be True FreeCodeCamp

    function every(collection, pre) { // Is everyone being true? for(var i in collection){ if(!collectio ...

  7. mac安装win10后触摸板没有右键功能键的添加技巧

    一些mac用户也会在自己的笔记本电脑上安装windows10系统. 但最近有部分用户发现,安装上win10正式版后,发现无论点击触摸板哪个位置,都只有左键,根本无法右键的问题, 针对此问题,现笔者分享 ...

  8. JS 100内与7相关的数

    var s =""; for(var i=0;i;i++) { if(i%7 == 0 ){ s += i+","; } else if((i-7)%10 == ...

  9. 可横向滑动的vue tab组件

    示例 前端使用技术:框架->vue 组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件 ly-tab 介绍地址 ly-tab npm地址 使用步骤 1,引入包,定义 ...

  10. spring注解@Autowired和@Resource比较

    用途:都是做bean的注入时使用 历史:@Autowired        属于Spring的注解    org.springframework.beans.factory.annotation.Au ...