Webview查找关键词并高亮显示
在移动端用Webview加载网页,然后要在其中搜索查找某个关键词,并在网页中高亮显示这些被找到的关键词,要实现这样一个效果,Android和iOS平台下有各自不同的实现方式。
在Android的Webview当中,提供了Webview.FindAll方法就可以直接实现这个功能。在B4A当中没有直接提供FindAll,但可以利用Reflection库来解决:
Sub FindAll (w As WebView, S As String) As Int Dim r As Reflector r.Target = w Return r.RunMethod2("findAll", S, "java.lang.String") End Sub |
所以在Android当中,这事儿就是这么简单。
而在iOS当中,没有提供FindAll方法,比较可行的方案是通过额外的JavaScript代码来实现。
可以提供关键词高亮功能的js代码如下:
var uiWebview_SearchResultCount = 0; function uiWebview_HighlightAllOccurencesOfStringForElement(element,keyword) { if (element) { if (element.nodeType == 3) { // Text node while (true) { //if (counter < 1) { var value = element.nodeValue; // Search for keyword in text node var idx = value.toLowerCase().indexOf(keyword); if (idx < 0) break; // not found, abort //(value.split); //we create a SPAN element for every parts of matched keywords var span = document.createElement("span"); var text = document.createTextNode(value.substr(idx,keyword.length)); span.appendChild(text); span.setAttribute("class","uiWebviewHighlight"); span.style.backgroundColor="yellow"; span.style.color="black"; uiWebview_SearchResultCount++; // update the counter text = document.createTextNode(value.substr(idx+keyword.length)); element.deleteData(idx, value.length - idx); var next = element.nextSibling; element.parentNode.insertBefore(span, next); element.parentNode.insertBefore(text, next); element = text; window.scrollTo(0,span.offsetTop); } } else if (element.nodeType == 1) { // Element node if (element.style.display != "none" && element.nodeName.toLowerCase() != 'select') { for (var i=element.childNodes.length-1; i>=0; i--) { uiWebview_HighlightAllOccurencesOfStringForElement(element.childNodes[i],keyword); } } } } } // the main entry point to start the search function uiWebview_HighlightAllOccurencesOfString(keyword) { uiWebview_RemoveAllHighlights(); uiWebview_HighlightAllOccurencesOfStringForElement(document.body, keyword.toLowerCase()); } // helper function, recursively removes the highlights in elements and their childs function uiWebview_RemoveAllHighlightsForElement(element) { if (element) { if (element.nodeType == 1) { if (element.getAttribute("class") == "uiWebviewHighlight") { var text = element.removeChild(element.firstChild); element.parentNode.insertBefore(text,element); element.parentNode.removeChild(element); return true; } else { var normalize = false; for (var i=element.childNodes.length-1; i>=0; i--) { if (uiWebview_RemoveAllHighlightsForElement(element.childNodes[i])) { normalize = true; } } if (normalize) { element.normalize(); } } } } return false; } // the main entry point to remove the highlights function uiWebview_RemoveAllHighlights() { uiWebview_SearchResultCount = 0; uiWebview_RemoveAllHighlightsForElement(document.body); } |
这段代码当中有两对函数,uiWebview_HighlightAllOccurencesOfString是关键词高亮显示,uiWebview_RemoveAllHighlights是移除高亮显示,可以根据需要调用。
这段JavaScript代码可以通过stringByEvaluatingJavaScriptFromString方法加载到Webview当中,并且执行函数。
具体要在B4i中实现可以这样操作:把这段代码保存在文件当中,并存放在File.DirAssets中。
通过代码读取文件中的js代码(注意文件编码格式),然后利用B4i的NativeObject(类似B4A的Reflector)来使用stringByEvaluatingJavaScriptFromString方法把js代码加载到Webview当中:
Dim no As NativeObject = webview1 Dim scripttext As String =File.ReadString(File.DirAssets,"test.js") no.RunMethod("stringByEvaluatingJavaScriptFromString:",Array(scripttext)) |
先把js代码加载到网页,然后就能运行其中关键词高亮的函数uiWebview_HighlightAllOccurencesOfString(keyword),代码如下:
scripttext ="uiWebview_HighlightAllOccurencesOfString('" & keyword & "');" no.RunMethod("stringByEvaluatingJavaScriptFromString:",Array(scripttext)) |
这样就完成了,效果如下图所示。类似的方法,也可以支持其他JS代码在网页中的应用。
一条评论
方版,你怎么啥都会呢。。。
Niubility!!