Android webview注入JS代码 修改网页内容操作

今天开发的时候遇到一个需求，就是需要隐藏webview的元素，鼓捣了半天 在stack overFlow找到了解决办法 在此记录一下

final WebView webview = (WebView)findViewById(R.id.browser);

 webview.getSettings().setJavaScriptEnabled(true);

 webview.setWebViewClient(new WebViewClient() {
  @Override
 public void onPageFinished(WebView view, String url)
 {
  // hide element by class name
  webview.loadUrl("javascript:(function() { " +
    "document.getElementsByClassName('your_class_name')[0].style.display='none'; })()");
  // hide element by id
  webview.loadUrl("javascript:(function() { " +
    "document.getElementById('your_id').style.display='none';})()");

 }
 });

webview.loadUrl(url);

结束！

补充知识：android——webview修改html界面，达到去除或隐藏部分界面的效果

如下所示：

去除NBA及CAB频道。

为了达到这个效果，当时考虑了两种方式。

第一种是在webview加载前，先讲html代码拉下来，修改后，在通过webview去加载。

第二种就是查看源代码，直接动手修改源代码，然后把源代码放在assets文件下，每次直接从本地加载。

在查看完源代码(在电脑浏览器，打开网页，右键单击，查看源代码)后发现，这个网页，太适合第二种方式了。频道是写死的。可以直接改。而其他的界面都是通过js动态生成的。毫不犹豫的把源代码copy下来(注意格式，utf-8,无bom，否则中文乱码)。

就这样，第一个问题顺利解决了。

加载assets下的html代码方式为：

webview.loadUrl("file:///android_asset/test.html");

以上这篇Android webview注入JS代码 修改网页内容操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Flutter WebView与JS互相调用简易指南

    本文采用Flutter官方WebView插件:https://pub.dartlang.org/packages/webview_flutter WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用Flutter和Flutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会. 开始之前先简单了解一下官方WebView所包含的API: onWebViewCreated:在WebView创建完成后调用,只会被调用一次: ini

  • Android webview注入JS代码 修改网页内容操作

    今天开发的时候遇到一个需求,就是需要隐藏webview的元素,鼓捣了半天 在stack overFlow找到了解决办法 在此记录一下 final WebView webview = (WebView)findViewById(R.id.browser); webview.getSettings().setJavaScriptEnabled(true); webview.setWebViewClient(new WebViewClient() { @Override public void onP

  • Android WebView通过动态的修改js去拦截post请求参数实例

    需求背景: 需要在用户点击提交按钮的时候拦截用户提交的数据. 遇到的问题: 1.页面不是自家前端做的,不能修改网页中的代码 2.要拦截的请求不是get请求,而是一个post请求 (难点在于:如果拦截的请求是get请求的话,我只需要拿到url,将后面拼接的参数键值对取出来就好了,但是post请求的参数键值对我们是看不到的...) 解决重点: 重写webViewClient的shouldInterceptRequest这个方法 1.这个方法是API21以后才出现的,还有一个过时的方法也要重写,不要忘

  • Android WebView与JS交互全面详解(小结)

    Android WebView与JS交互全面详解(小结)

    Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5页面等,下面来看看这两是怎么交互的 目录 1.

  • android webview获取html代码和根据id获取value实例

    1 前言 最近做一个项目,需要webview获取网页中input的内容,把知识整理一下,做个记录,也希望对大家有所帮助. 2 获取html内容 2.1 初始化webview webview.getSettings().setJavaScriptEnabled(true); webview.addJavascriptInterface(new InJavaScriptLocalObj(), "java_obj"); /** *注意,@JavascriptInterface方法的注解是一定

  • Android webview与js的数据交互

    Android webview与js的数据交互

    项目要用到Webview和js交互,查了查以前的项目感觉还是有必要整理下的. 简单描述下项目中用到的地方,比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录,点击web页的拨打电话弹出原生dialog询问是否拨打,点击web页里面的图片进行放大处理.针对于上述的需求我们通用的方式大概有两种,一是监听a标签,在shouldOverrideUrlLoading根据URL进行判断,二是js代码注入,找到我们想要处理的元素进行js代码注入.下面就这两种方式简单的进行描述 首先需要初

  • Android webview和js互相调用实现方法

    Android webview和js互相调用实现方法

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5

  • Android  webview和js互相调用实现方法

    Android  webview和js互相调用实现方法

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5

  • Android webview与js交换JSON对象数据示例

    Android webview与js交换JSON对象数据示例

    最近几个项目的测试结果,Android无法主动通过调用 webview.loadUrl("javascript:"+callbackFunction+"('"+data+"')"); 这种方式将jsonobject类型的data传给js,因为js那边得到就是一个string的对象. 与此同时,js主动调用android的对象方式,android也无法返回给js一个jsonobject,需要js做一下转换,例如: Android 代码: 复制代码

  • 简易js代码实现计算器操作

    简易js代码实现计算器操作

    复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--

  • Android的WebView与H5前端JS代码交互的实例代码

    Android的WebView与H5前端JS代码交互的实例代码

    前段时间项目有深度和前端对接过,也是碰了一些坑,现在有时间就拿出来分享下 JS调用原生不外乎就两种,一种是传假的url,也就是url拦截的方式,类似于下面这种: //js代码 function sendCommand(param){ var url="js-call://"+param; document.location = url; } sendCommand("PlaySnake"); //Java代码 mWebView.setWebViewClient(ne

随机推荐