js在html加载前注入js,webview之js动态注入

使用场景

加载在线网页，需要在网页加载完成之后，通过js注入的方式，对其中的部分元素进行属性的修改.这里的示例是使用本地的网页进行修改。在线的使用同样的方式处理.###

html源代码

WebView

body {

background: #cbcc1a;

}

.btn {

line-height: 40px;

margin: 10px;

background: #cccccc;

}

.logo {

height: 100px;

background: aqua;

}

WebView

请输入要传递的值:

点我

var btnEle = document.getElementById("btn")

var inputEle = document.getElementById("input")

btnEle.addEventListener("click", function () {

var value = inputEle.value

// alert(value)

/*调用java代码*/

if (window.zyJsLuncher != null) {

window.zyJsLuncher.setValue(value);

}

})

activity中的代码(xml省略)

WebView webView;

private WebSettings mWebViewSettings;

@Override

public void initView() {

mWebViewSettings = webView.getSettings();

initNew();

mWebViewSettings.setJavaScriptEnabled(true);

/*打开允许调试的开关*/

webView.setWebContentsDebuggingEnabled(true);

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

}

private void initNew() {

mWebViewSettings.setJavaScriptEnabled(true);

mWebViewSettings.setUseWideViewPort(true);

mWebViewSettings.setLoadWithOverviewMode(true);

mWebViewSettings.setAllowFileAccess(true);

mWebViewSettings.setSupportZoom(true);

mWebViewSettings.setJavaScriptCanOpenWindowsAutomatically(true);

try {

if (Build.VERSION.SDK_INT >= 16) {

Class> clazz = mWebViewSettings.getClass();

Method method = clazz.getMethod("setAllowUniversalAccessFromFileURLs", boolean.class);

if (method != null) {

method.invoke(mWebViewSettings, true);

}

}

} catch (Exception e) {

e.printStackTrace();

}

mWebViewSettings.setPluginState(WebSettings.PluginState.ON);

mWebViewSettings.setDomStorageEnabled(true);// 必须保留，否则无法播放优酷视频，其他的OK

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

mWebViewSettings.setMixedContentMode(mWebViewSettings.MIXED_CONTENT_ALWAYS_ALLOW);

}

webView.setWebViewClient(webViewClient);

}

private WebViewClient webViewClient = new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

@Override

public void onPageFinished(WebView view, String url) {

/**

* js注入

*/

injectJsSample2();

}

};

private void injectJsSample2() {

String tmp = "javascript: function sayHi() { " +

" var element1 = document.getElementById(\"input1\");\n" +

" element1.style.height = \"150px\";\n" +

" element1.style.background = \"green\";\n" +

"}";

// 先注入1

webView.loadUrl(tmp);

String tmp2 = "javascript: function f2() {\n" +

" var ip1Ele = document.getElementsByClassName(\"inp1\")[0];\n" +

" ip1Ele.style.color = \"white\";\n" +

" ip1Ele.style.fontSize = \"35px\";\n" +

" }";

// 先注入1

webView.loadUrl(tmp2);

// 然后再调用

// webView.loadUrl("javascript: onload(sayHi());");

// 因为js已经注入了，就可以直接调用了

webView.loadUrl("javascript: sayHi();");

webView.loadUrl("javascript: f2();");

}