我如何注入一个复杂的JavaScript自运行功能到android的webview？

我正在尝试将JavaScript函数注入到运行服务器URL“www.myserver.com”的webview中。但是，我无法这样做。我尝试了几种方法，但没有成功。我尝试设置js警报，在读取js文件时不会弹出。我不确定我做错了什么。这里是我到目前为止的代码：我的js文件 “page.js”：我如何注入一个复杂的JavaScript自运行功能到android的webview？

(function() { 
    **alert("this is a test alert");** 
    if (window.page) { 
     return; // page has been loaded from somewhere, not to redefine it again 
    } 

    function Response(xhr) { 
     this.xhr = xhr; 
     this.status = xhr.status; 
    } 
    Response.prototype.getHeader = function(header) { 
     return this.xhr.getResponseHeader(header); 
    }; 
    Response.prototype.getBody = function() { 
     return this.xhr.responseText; 
    }; 

    function ajax(url, callback) { 
     //TODO support PUT method 
     var xhr = new XMLHttpRequest(); 
     xhr.open("GET", url, true); 
     xhr.onerror = function(e) { 
      callback.onerror(e); 
     }; 
     xhr.onreadystatechange = function(event) { 
      if (this.readyState != this.DONE || this.status == 0) { 
       return; 
      } 
      if (this.status != 200) { 
       var response = new Response(xhr); 
       callback.onfail(response); 
       return; 
      } 
      callback.onsuccess(this.responseText); 
     }; 
     xhr.send(); 
    }; 


    var rpc = { 
     type: ["SMALL", "LARGE"], 
     exec: function(call, type) {// "call" conform to JSON-RPC 2.0 
      //TODO differentiate POST/GET based on rpc.type.SMALL/LARGE 
      var param = encodeURIComponent(JSON.stringify(call)); 
      ajax("?_$b=" + param, { 
       onerror: function(e) { 
        //TODO use logging 
        alert("Error:"+e.toString()); 
       }, 
       onfail: function(response) { 
        //TODO use logging 
        alert("Failed:"+response.getBoby()); 
       }, 
       onsuccess: function(text) { 
        //TODO use logging 
        alert("page success:"+text); 
       }, 
      }); 
     } 
    }; 

    var _$b = window.page = { 
      version: "0.1" 
     }; 

    _$b.has = function(feature) { 
      // TODO support nested objects, e.g.: "cache.get" 
      return _$b[feature]; 
     }; 

    _$b.notify = function(id, data) { 
      // TODO invoke the function from native and send web event 
      // var event = document.createEvent('Event'); 
      // event.initEvent(id, true, true); 
      // document.dispatchEvent(event); 
      alert("id:" + id + ";data:" + data); 
     }; 

    _$b.navigate = function(url, title) { 
      rpc.exec(// JSON-RPC 2.0 
       {method: "navigate", params: { 
        "url": url, 
        "title": title 
       }}, rpc.type.SMALL); 
     }; 

    _$b.cache = {}; 

    _$b.cache.get = function(id) { 
      rpc.exec(
       {method: "cache.get", params: { 
        "id": id, 
       }}, rpc.type.SMALL); 
     }; 

    _$b.cache.put = function(id, obj, ts, ttl) { 
      rpc.exec(
       {method: "cache.put", params: { 
        "id": id, 
        "obj": obj, 
        "ts": ts, 
        "ttl": ttl, 
       }}, rpc.type.LARGE); 
     }; 

    _$b.cache.has = function(id) { 
      rpc.exec(
       {method: "cache.has", params: { 
        "id": id, 
       }}, rpc.type.SMALL); 
     }; 

})();

这里是我的WebView代码：

@Override 
        public void onPageFinished(WebView view, String url) { 

         String javascript = ""; 
         try{ 
          AssetManager manager = view.getContext().getAssets(); 
          InputStream is = manager.open("page.js"); 
          InputStreamReader isr = new InputStreamReader(is); 
          BufferedReader br = new BufferedReader(isr); 

          String line; 
          while ((line = br.readLine()) != null) { 
           javascript += line; 

          } 
          is.close(); 
         } 

         catch(Exception e){} 

         view.loadUrl("javascript:" + javascript); 


        } 

       webview.setWebChromeClient(new WebChromeClient() {}); 
       webview.loadUrl(url);

任何想法如何得到警报弹出？注意：当我删除js中的所有功能并只保留警报时，警报就可以工作，但是在我重新添加必要的js功能后，警报不再起作用。任何想法可能会阻止它按预期注入js？

来源

2016-04-07 Marissa Nicholas

考虑这段代码。这是简单的HTML & JavaScript代码后您的机型page.js

<html> 
    <script type="text/javascript"> 

     (function() { alert('inside function'); }) 
     alert('ok'); 

    </script> 
</html>

执行此操作，可以推导出函数内部的警报没有在一开始执行，除非你专门调用它。

要使用点击运行功能：（试试这个）

<html> 
    <input type="button" onclick="run()" value="Start" /> 

    <script type="text/javascript"> 
     var run = (function() { alert('inside function'); }) 
     alert('ok'); 

    </script> 
</html>

要运行函数[自运行]（试试这个）

<html> 
    <script type="text/javascript"> 
     var run = (function() { alert('inside function'); }) 
     alert('ok'); 

     //you need to execute your function that you have named 
     run(); 

    </script> 
</html>

来源

2016-04-07 03:18:51 sihao

我怎么修复和打电话给我的JS功能让它工作？在哪里以及如何在我的本地代码中触发它，以便在您的html中替换onclick =“run”？ –

我已经更新了一个新的样本。你需要命名该函数，并执行它来运行它 – sihao

谢谢。当我复制粘贴整个文件内容作为一个字符串，而不是在我的输入流阅读器中读取内容作为“file.js”时它工作。我想它也解释了我的js文件中的选项卡和新行。你知道一种方式，我可以确保这些标签和新行不出现吗？无论哪种方式，谢谢你的回应。你也可以帮我解决这个问题，我正在面对json解析从相同的JavaScript字符串：http://stackoverflow.com/questions/36498500/how-to-json-parse-a-url-parameter-in-android -webview –

我如何注入一个复杂的JavaScript自运行功能到android的webview？

回答

相关问题