在 android 中使用 webview 将 javascript 文件注入我的站点

Question

我想将 javascript 文件注入我的站点。我的站点是服务器上的一个简单 html 页面。我注入了 css 文件。 ()

所以我现在可以使用 CSS 管理我简单的 html 站点。但我也想用 javascript 来管理它。我的 jscript.js 文件在 asset 文件夹中。我想在我的网站上拥有 javascript 的完全访问权限。（记住，这是我的网站）。请为我写出正确的代码。谢谢。

这是我的 MainActivity.java 文件：

package com.example.z5070.myapplication;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.Base64;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import java.io.InputStream;


public class MainActivity extends ActionBarActivity {



        WebView webView;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            webView = new WebView(this);
            setContentView(webView);


            webView.getSettings().setJavaScriptEnabled(true);


            webView.setWebViewClient(new WebViewClient() {

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


                    injectCSS();
                    super.onPageFinished(view, url);
                }
            });


            webView.loadUrl("http://www.example.com/");
        }


        private void injectCSS() {
            try {
                InputStream inputStream = getAssets().open("style.css");
                byte[] buffer = new byte[inputStream.available()];
                inputStream.read(buffer);
                inputStream.close();
                String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
                webView.loadUrl("javascript:(function() {" +
                        "var parent = document.getElementsByTagName('head').item(0);" +
                        "var style = document.createElement('style');" +
                        "style.type = 'text/css';" +
                        "style.innerHTML = window.atob('" + encoded + "');" +
                        "parent.appendChild(style)" +
                        "})()");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {

            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
        }

        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            int id = item.getItemId();
            if (id == R.id.action_settings) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }


        }

Answer 1

添加一个新方法来注入 javascript 文件。

 private void injectJS() {
        try {
            InputStream inputStream = getAssets().open("jscript.js");
            byte[] buffer = new byte[inputStream.available()];
            inputStream.read(buffer);
            inputStream.close();
            String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
            webView.loadUrl("javascript:(function() {" +
                    "var parent = document.getElementsByTagName('head').item(0);" +
                    "var script = document.createElement('script');" +
                    "script.type = 'text/javascript';" +
                    "script.innerHTML = window.atob('" + encoded + "');" +
                    "parent.appendChild(script)" +
                    "})()");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

在页面加载完成后调用两种方法：injectCSS() 和 injectJS()。

webView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url) {
                injectCSS();
                injectJS();
                super.onPageFinished(view, url);
            }
        });

我希望这能解决问题。

注意注入 js 文件中定义的 onload 事件的行为方式。

Answer 2

对先前答案的一些改进。假设我们使用西里尔字母。结果将是垃圾字符串。这不好。使用下面的代码，您可以在内容中使用非英语字符。只需在您的代码中添加额外的 url-encoding/decoding 即可。下面是重新编辑的版本。

private void injectJS() {
    try {
        InputStream inputStream = getAssets().open("jscript.js");
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();

        // preserve non-english letters
        String uriEncoded = URLEncoder.encode(new String(buffer, "UTF-8"), "UTF-8").replace("+", "%20");

        String encoded = Base64.encodeToString(uriEncoded.getBytes(), Base64.NO_WRAP);
        webView.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var script = document.createElement('script');" +
                "script.type = 'text/javascript';" +
                // don't forget to use decodeURIComponent after base64 decoding
                "script.innerHTML = decodeURIComponent(window.atob('" + encoded + "'));" +
                "parent.appendChild(script)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
}

在 android 中使用 webview 将 javascript 文件注入我的站点

Inject javascript file to my site with webview in android

javascript

android

webkit

webview