android webview 与 javascript交互

最新推荐文章于 2024-11-17 21:03:46 发布
最新推荐文章于 2024-11-17 21:03:46 发布
阅读量3.1k 收藏 1
点赞数
文章标签： javascript android function button string sqlite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongyingzhuantu/article/details/6386260
版权

webview与javascript交互实现图文混排效果，感觉还不错！

直接上demo吧。

demo1:

template.html

<html>

<head>

</head>

<script>

function load_title(title) {

  var t = document.getElementById("title");

  t.innerHTML = title;

}

 

function load_content(content) {

  var c = document.getElementById("content");

  c.innerHTML = content;

}

 

function load_img(img) {

  var i = document.getElementById("img");

  i.src = img;

}

 

</script>

<body>

<div>

<img id="img" src="" alt="loading..." style="float:left;margin:5px;"/><span id="title" style="font-size:24px;padding:20px;"></span><br/><span id="content"></span>

</div>

</body>

 

</html>

 

MainActivity.java文件：

public class MainActivity extends Activity {

private WebView webView;

private Button loadHtml;

private String str="这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这这个阶段的典型特征是容易被新技术的华丽外表所迷惑。当在网上看到一种新技术的介绍或者心得，立即产生了大量肾上腺素的分泌，干什么都想用一用，如果这";

// 我们用它来完成我们的异步调用 ,当我new这个对象出来，它会绑定到当前

// activity消息队列里去，如果发现它里面新建了Runnable，它就会新建一个线程去。。。

private Handler handler = new Handler();

 

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.webviewtestlayout);

webView = (WebView) this.findViewById(R.id.webView);

// 支持javaScript

webView.getSettings().setJavaScriptEnabled(true);

// 不保存表单数据

webView.getSettings().setSaveFormData(false);

// 不保存密码

webView.getSettings().setSavePassword(false);

// 不支持页面放大功能

webView.getSettings().setSupportZoom(false);

 

// 把我们的页面显示出来

webView.loadUrl("file:///android_asset/template.html");

loadHtml = (Button)findViewById(R.id.loadHtml);

loadHtml.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// FIXME Auto-generated method stub

handler.post(new Runnable() {

@Override

public void run() {

webView.loadUrl("javascript:load_title('" + "My Title"

+ "')");

webView.loadUrl("javascript:load_content('" + str

+ "')");

webView.loadUrl("javascript:load_img('" + "/sdcard/dzsy.jpg"

+ "')");

}

});

}

});

 

}

 

demo2是有交互的：

index.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>联系人列表</title>

<script type="text/javascript">

//我们传入的jsondata是一个数组如：

//[{id:20,name:"王昌龙",phone:"18701445755"},......] 这样

 function show(jsondata){

  var jsonobjs = eval(jsondata);

  var table = document.getElementById("personTable");

  for(var y=0; y<jsonobjs.length; y++){

         var tr = table.insertRow(table.rows.length); //添加一行

         tr.onmouseover = function (){

          this.style.backgroundColor= "red";

         }

         tr.onmouseout = function (){

          this.style.backgroundColor= "#000000";

         }

         //添加三列

         var td1 = tr.insertCell(0);

         var td2 = tr.insertCell(1);

         td2.align = "center";

         var td3 = tr.insertCell(2);

         //设置列内容和属性

         td1.innerHTML = jsonobjs[y].id; 

         //转义

         td2.innerHTML = "<a href='javascript:partner4java.call(/"5554/")'>"+ jsonobjs[y].name + "</a>"; 

         td3.innerHTML = jsonobjs[y].phone;

  }

 }

 function init(){

  var jsondata  = "[{id:20,name:/"王昌龙/",phone:/"18701445755/"},{id:21,name:/"小妾/",phone:/"18701445755/"}]";

  show(jsondata); 

 }

</script>

</head>

MainActivity.java文件：

public class MainActivity extends Activity {

private WebView webView;

private Button loadHtml;

// 我们用它来完成我们的异步调用 ,当我new这个对象出来，它会绑定到当前

// activity消息队列里去，如果发现它里面新建了Runnable，它就会新建一个线程去。。。

private Handler handler = new Handler();

 

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.webviewtestlayout);

webView = (WebView) this.findViewById(R.id.webView);

// 支持javaScript

webView.getSettings().setJavaScriptEnabled(true);

// 不保存表单数据

webView.getSettings().setSaveFormData(false);

// 不保存密码

webView.getSettings().setSavePassword(false);

// 不支持页面放大功能

webView.getSettings().setSupportZoom(false);

 

webView.addJavascriptInterface(new Partner4javaJavaScript(),

"partner4java");

// 把我们的页面显示出来

webView.loadUrl("file:///android_asset/index.html");

loadHtml = (Button)findViewById(R.id.loadHtml);

loadHtml.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// FIXME Auto-generated method stub

handler.post(new Runnable() {

@Override

public void run() {

// // 可以通过访问SQLite访问数据库获取

List<Contact> contacts = new ArrayList<Contact>();

contacts.add(new Contact(12, "王昌龙", "18701445755"));

contacts.add(new Contact(13, "小妾", "18701445755"));

webView.loadUrl("javascript:show('" + buildJson(contacts)

+ "')");

}

});

}

});

 

}

private String buildJson(List<Contact> contacts) {

try {

JSONArray jsonArray = new JSONArray();

for (Contact contact : contacts) {

JSONObject jsonObject = new JSONObject();

jsonObject.put("id", contact.getId());

jsonObject.put("name", contact.getName());

jsonObject.put("phone", contact.getPhone());

jsonArray.put(jsonObject);

}

return jsonArray.toString();

} catch (JSONException e) {

e.printStackTrace();

}

return null;

}

 

private final class Partner4javaJavaScript {

/**

* 获取所有联系人

*/

public void getContacts() {

handler.post(new Runnable() {

@Override

public void run() {

// 可以通过访问SQLite访问数据库获取

List<Contact> contacts = new ArrayList<Contact>();

contacts.add(new Contact(12, "王昌龙", "18701445755"));

contacts.add(new Contact(13, "小妾", "18701445755"));

webView.loadUrl("javascript:show('" + buildJson(contacts)

+ "')");

}

});

 

}

 

/**

* 生成Json格式的数据

* 

* @param contacts

* @return

*/

private String buildJson(List<Contact> contacts) {

try {

JSONArray jsonArray = new JSONArray();

for (Contact contact : contacts) {

JSONObject jsonObject = new JSONObject();

jsonObject.put("id", contact.getId());

jsonObject.put("name", contact.getName());

jsonObject.put("phone", contact.getPhone());

jsonArray.put(jsonObject);

}

return jsonArray.toString();

} catch (JSONException e) {

e.printStackTrace();

}

return null;

}

/**

  * 回调方法

  * @param phone

  */

 public void call(final String phone){

  handler.post(new Runnable() {

   @Override

   public void run() {

    startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ phone)));

   }

  });

 }

 

}

}

野狼_危机
关注
Android WebView与JavaScript交互
07-28
接下来，我们关注重点——JavaScript交互。Android提供了一种名为`WebViewClient`的类，它可以监听页面加载事件，并在特定时刻与JavaScript进行交互。通过重写`WebViewClient`的`shouldOverrideUrlLoading()`方法，...
我的Android进阶之旅------>Android中使用HTML作布局文件以及调用Javascript
移动编程
04-11 298
在android开发中，通常使用xml格式来描述布局文件，采用Android的layout布局有时候根本满足不了我们对于界面的要求，有时候没有web页面那样炫。就目前而言，熟悉android布局及美化的人员少之又少，出现了严重的断层。大部分企业，其实还是程序员自己动手布局。这样既浪费时间和精力，也未必能达到理想的效果。但是，在企业级的android开发中，使用html页面进行布局，也有很多的优势...
安卓html js,Android调用HTML中JavaScript方法报错
weixin_36001279的博客
06-28 252
Android中Java调用JavaScript方法报错：Android中Java代码：webView.loadUrl("javascript：show('" + json + "')")//上边这行代码看着没有，但是有些时候回报如下错误：W/WebView: java.lang.Throwable: A WebView method was called on thread 'JavaBridg...
websql android 路径,Android 通过WebView 调用Js sqlite数据库
weixin_42366533的博客
06-03 251
var row = rs.rows.item(i);//转换时间，并格式化输出var time = new Date();time.setTime(row.createtime);var timeStr = time.format("yyyy-MM-dd hh:mm:ss");//拼装一个表格的行节点result += ""+(i+1)+""+row.name+""+row.phone+""+ro...
Android 通过WebView 调用Js sqlite数据库
Sky百事
09-05 3494
js里面写好的数据库我想用在Android上、不多说直接来源码、 这个是Android 代码 这里面的布局只是个Webview package com.example.fyapp.db; import com.example.fyapp.R; import android.annotation.SuppressLint; import android.app.Activity;
Android之WebView安全
laymenISmouse的专栏
01-30 859
本地攻击 （1）Content Provider SQL注入、实现openFile函数导致目录遍历 （2）Activity的导出、劫持问题 私有组件错误导出 （3）SQLite数据库 SQL注入、load_extension代码执行 1.WebView安全 Android内置用于显示Web内容的控件。除用于 实现Web浏览器之外...
Android WebView与JavaScript交互实现Web App
08-12
在这个主题中，我们将深入探讨如何在Android中加载assets目录下的HTML文件，并通过WebView实现与JavaScript的交互。 首先，我们要了解`WebView`的基本用法。在Android布局文件中，我们添加一个WebView组件： ```...
Android WebView与JavaScript交互（续）
08-06
总结，Android中的WebView与JavaScript交互是一个强大且常用的功能，通过它我们可以实现原生应用与网页内容的深度融合。理解并熟练运用这些知识点，将有助于提升应用的用户体验和功能多样性。但同时，也必须关注安全...
Android WebView与JavaScript交互操作（Demo）
06-20
为了使Android移动项目能够在较短的时间内完成开发，同时降低技术人员开发的成本投入，往往会采用Hybrid APP的开发模式。...势必需要了解与掌握Android[java]与JavaScript之间的交互、相互调用操作的方法与技术。
android中WebView和javascript实现数据交互实例
10-25
然而，有时候我们需要让WebView中的JavaScript代码能够与Android代码进行交互，即让JavaScript调用Android代码的方法，以及让Android代码调用JavaScript定义的函数。以下是实现这种数据交互的一些知识点： 首先，在...
android webview保存图片,android 从webview中读取缓存的图片
weixin_27199085的博客
05-26 147
SQLiteDatabase db = getActivity().openOrCreateDatabase("webviewCache.db",Context.MODE_PRIVATE,null);Cursor c = db.rawQuery("SELECT * FROM cache where url = ?",new String[]{iImageUrl});while (c.moveToN...
如何编译 Cesium 源码
ismartcube的博客
11-13 1144
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 896
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
佚名程序员
11-16 863
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Vue常用加密方式
m0_51431448的博客
11-13 162
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
React中事件绑定和Vue有什么区别？
最新发布
m0_75074819的博客
11-17 238
React使用事件代理（Event Delegation）技术，将所有事件监听器绑定到document上，而不是直接绑定到具体的DOM元素上。：React将所有原生DOM事件封装成合成事件，通过统一的接口暴露给开发者。：Vue提供了丰富的事件修饰符（如.stop、.prevent等），方便开发者处理复杂的事件逻辑。如果你在类组件中使用事件处理函数，通常需要显式绑定 this，或者使用箭头函数来自动绑定。：Vue通过指令（如v-on）来绑定事件，指令内部会处理事件的监听和分发。因此，不需要额外的绑定。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 567
nuxt
Mock.js生成随机数据，拦截 Ajax 请求
gklcsdn的博客
11-13 1225
Mock.js提供了一个Mock.mockurl：要拦截的请求 URL，支持字符串或正则表达式。method：请求类型，比如"get""post"，不区分大小写。data：要返回的模拟数据格式。定义数据结构：通过 JSON 模板定义结构，并使用占位符生成随机数据。拦截请求：通过Mock.mock拦截指定的 URL 请求。自定义生成规则：通过 Mock.js 的占位符生成丰富的数据类型，包括字符串、数值、数组、日期、图片等。模拟延迟：使用Mock.setup模拟网络延迟。
vite + vue3 + ts解决别名引用@/api/user报错找不到相应的模块
qq_43206280的博客
11-14 310
这里的前提是，文件路径以及文件已存在的情况下还是报错。
Android WebView与JavaScript交互实现深度解析
本文主要探讨了在Android应用中如何实现WebView与JavaScript的相互调用，这对于构建复杂的UI界面和利用HTML5的跨平台优势非常重要。文章通过实例代码详细阐述了这一过程，适合Android开发者学习。 在Android开发中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值