注入前：

注入后：

主界面：

  1. package com.example.webviewjsdemo;
  2. import android.os.Bundle;
  3. import android.app.Activity;
  4. import android.view.Menu;
  5. import android.webkit.WebChromeClient;
  6. import android.webkit.WebSettings;
  7. import android.webkit.WebView;
  8. import android.webkit.WebViewClient;
  9. import android.widget.Toast;
  10. public class MainActivity extends Activity {
  11. private WebView wv;
  12. @Override
  13. protected void onCreate(Bundle savedInstanceState) {
  14. super.onCreate(savedInstanceState);
  15. setContentView(R.layout.activity_main);
  16. wv = (WebView) findViewById(R.id.wv_main);
  17. wv.setWebChromeClient(new WebChromeClient() {
  18. });
  19. wv.setWebViewClient(new WebViewClient() {
  20. @Override
  21. public void onPageFinished(final WebView view, String url) {
  22. Toast.makeText(getApplicationContext(), "3秒后改变内容", 1).show();
  23. new Thread(){
  24. public void run() {
  25. try {
  26. Thread.sleep(3000);
  27. } catch (InterruptedException e) {
  28. e.printStackTrace();
  29. }
  30. view.loadUrl("javascript:function myFunction(){x=document.getElementById(\"demo\");  x.innerHTML=\"改变了html内容!\";}");
  31. view.loadUrl("javascript:myFunction()");
  32. };
  33. }.start();
  34. super.onPageFinished(view, url);
  35. }
  36. });
  37. WebSettings wvSettings = wv.getSettings();
  38. wvSettings.setJavaScriptEnabled(true);
  39. wv.loadUrl("file:///android_asset/demo.html");
  40. }
  41. }

主界面layout:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity" >
  6. <WebView
  7. android:id="@+id/wv_main"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:layout_centerHorizontal="true"
  11. android:layout_centerVertical="true" />
  12. </RelativeLayout>

assets目录下的demo.html文件

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <h1>Js注入</h1>
    5. <p id="demo" style="color:red;font-size:16px;">
    6. 这里将会改变。
    7. </p>
    8. </body>
    9. </html>  

      1. Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现，然后就会执行javascript后面的代码。

        但是当需要注入一整个js文件的时候，貌似就有点麻烦了。
        不过理清以下思路，方法其实也很简单，如下：
        我们通过在webview的onPageFinished方法中执行js代码注入：

        第一种：
        当webview加载完之后，读取整个js文件中的内容，然后将整个文件内容以字符串的形式，通过webview.loadUrl("javascript:fileContentString")注入

        URL url = new URL("http://www.rayray.ray/ray.js");
        
in = url.openStream();
        
byte buff[] = new byte[1024];
        
ByteArrayOutputStream fromFile = new ByteArrayOutputStream();
        
FileOutputStream out = null;
        
do {
        
       int numread = in.read(buff);
        
       if (numread <= 0) {
        
         break;
        
         }
        
        fromFile.write(buff, 0, numread);
        
     } while (true);
        
String wholeJS = fromFile.toString();
        @Override
        
public void onPageFinished(WebView view, String url)
        
 {
        
        super.onPageFinished(view, url);
        
         webview.loadUrl("javascript:" + wholeJS);
        
 }

        第二种：
        页面加载完之后，直接向webview对应的html中加入<script>便签，并包含要注入的js的Url地址，如下：

        String js = "var newscript = document.createElement(\"script\");";
        
js += "newscript.src=\"http://www.123.456/789.js\";";
        
js += "document.body.appendChild(newscript);";
        @Override
        
 public void onPageFinished(WebView view, String url)
        
  {
        
       super.onPageFinished(view, url);
        
        webview.loadUrl("javascript:" + js);
        
  }

        后记：上面两种方式中，第二种方法更加简单方便一点。不过第二种方法也有问题，当你注入完JS之后你想要立即调用其中的方法，第一种方法没问题可以调用到。但是第二种方法中，你要确保注入的<script>便签对应的js文件加载完才可调用成功。

        解决：在第二种方法中为加入script标签添加onload事件，确保该script已加载完成。代码可更改如下：

        String js = "var newscript = document.createElement(\"script\");";
        
   js += "newscript.src=\"http://www.123.456/789.js\";";
        
   js += "newscript.onload=function(){xxx();};";  //xxx()代表js中某方法
        
   js += "document.body.appendChild(newscript);";

        IOS中也一样，按照同样的思路然后在-(void)webViewDidFinishLoad:(UIWebView *)webView 中使用[webView stringByEvaluatingJavaScriptFromString:@"xxx"];即可 。

WebView Js注入的更多相关文章

  1. ios开发－－网页中调用JS与JS注入

    先将网页弄到iOS项目中: 网页内容如下, 仅供测试: <html> <head> <meta xmlns="http://www.w3.org/1999/xh ...

  2. 【iOS】网页中调用JS与JS注入

    非常多应用为了节约成本,做出同一时候在Android与iOS上都能使用的界面,这时就要使用WebView来做.Android和IOS上都有WebView,做起来非常省事.当然这时就要考虑怎样在Andr ...

  3. WebView JS交互 JSBridge 案例 原理 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. WebView JS交互 addJavascriptInterface MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. WebView JS与RN进行通讯

    RN0.37终于官方增加了WebView与React Native的通讯,之前一真使用的是第三方控件React-Native-WebView-Bridge,但不是知道怎么回事这个第三方控件喊了很长时间 ...

  6. js注入，黑客之路必备！

    最近刚出了新闻,阿里四名网络安全部门员工利用网页漏洞写js脚本抢月饼,于是兴致来了,想了解一下这个js脚本到底怎么写,各种刷单各种抢枪抢又是怎么实现的. 什么是javascript注入攻击? 1.每当 ...

  7. PHP防止sql注入-JS注入

    一:为了网站数据安全,所有和数据库操作的相关参数必须做相关过滤,防止注入引起的网站中毒和数据泄漏 1.PHP自带效验函数 mysql_real_escape_string() 函数转义 SQL 语句中 ...

  8. 我对于js注入的理解

    资料:http://blog.csdn.net/gisredevelopment/article/details/41778671 js注入就是在前端利用使用js的地方 在这其中注入你写的js代码 使 ...

  9. webview javascript 注入方法

    Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现,然后就会执行javascript后面的代码. 但是当需 ...

随机推荐

  1. 洛谷 P1529 回家 Bessie Come Home

    P1529 回家 Bessie Come Home 题目描述 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出 ...

  2. 洛谷 P2071 座位安排 seat.cpp/c/pas

    P2071 座位安排 seat.cpp/c/pas 题目背景 公元二零一四年四月十七日,小明参加了省赛,在一路上,他遇到了许多问题,请你帮他解决. 题目描述 已知车上有N排座位,有N*2个人参加省赛, ...

  3. ios中NSUserDefaults的使用方法

    ios中NSUserDefaults的使用方法 NSUserDefaults类提供了一个与默认系统进行交互的编程接口.NSUserDefaults对象是用来保存.恢复应用程序相关的偏好设置,配置数据等 ...

  4. 怎么用命令行运行jar文件

    假设你配置好了jre环境,你如今有一个打包好的jar文件,你能够这样子開始运行 java -classpath example.jar mainClass -classpath告诉虚拟机在哪里找类的字 ...

  5. [博弈] hdu 3683 Gomoku

    题意: 两个人下五子棋.给你现有棋盘,推断在三步之内的胜负情况. 输出分为几种. 1.棋盘不合法 2.黑或白在第一步赢下在(x,y)点,多个输出x最小的.y最小的. 3.输在第二步 4.黑或白在第三步 ...

  6. UVALive 4223 / HDU 2962 spfa + 二分

    Trucking Problem Description A certain local trucking company would like to transport some goods on ...

  7. UBUNTU 16.04 下安装动态链接库方法（使用ln命令可以随意映射动态库，ldd查看缺少的动态库）

    一般先使用ldd 来查看该应用程序缺少什么东西,然后,再根据sudo apt install XXX 去安装相应的动态库. 假如没有对应的库,可以使用: sudo ln -s /usr/lib/lib ...

  8. mysql安装，数据库连接

    安装教程http://jingyan.baidu.com/article/e3c78d64412ae83c4c85f5fd.html 首先打开MySQL官网,找到Downloads标签,点击进入.如果 ...

  9. BAT 解密（四）：配置中心、服务中心、异步技术细节

    在系列文章的第二篇文章< BAT解密(二):聊聊业务如何驱动技术发展 >中我们深入分析了互联网业务发展的一个特点:复杂性越来越高.复杂性增加的典型现象就是系统越来越多,当系统的数量增加到一 ...

  10. Node_进阶_4

    Node进阶第四天 一.传统数据库技术回顾 数据库就是存储数据的,那么存储数据用txt就行了啊,为什么要有数据库? 理由之一:数据库有行.列的概念,数据有关系,数据不是散的. 老牌数据库,比如Mysq ...