UIWebView中的範圍回調

Question

我有一個UIWebView帶有靜態文本內容，需要獲取網頁視圖內容中文本的某個NSRange的矩形。

我猜這是唯一的方法是通過javascript，但我不知道從哪裏開始。你會如何去做這件事？

Answer 1

這裏的解決方案，我想出來的，感謝Anton如何真正得到來自節點的ClientRect。我基本上實現的是一種從純文本中的範圍獲取到開始節點，開始在節點中的位置，節點中的結束節點和結束位置的方式。

function boundingRectForRange(rangeStart, rangeEnd, node) { 
    var startNode = null; 
    var endNode = null; 
    var startPositionInNode = 0; 
    var endPositionInNode = 0; 

    var elapsed = 0; 
    var rangeStartComputed = 0; 

    var childNodes = node.childNodes; 

    for (var i=0;i<childNodes.length;i++) { 
     var item = childNodes[i]; 

     var textContent = item.textContent; 
     var length = textContent.length; 
     var newElapsed = elapsed + length; 

     if (rangeStart <= newElapsed && rangeStartComputed == 0) { 
      startNode = item; 
      startPositionInNode = rangeStart - elapsed; 
      rangeStartComputed = 1; 
     } 

     if (rangeEnd <= newElapsed && rangeStartComputed == 1) { 
      endNode = item; 
      endPositionInNode = rangeEnd - elapsed; 
      break; 
     } 

     elapsed = newElapsed; 
    } 

    if (startNode == null || endNode == null) {  
     return false; 
    } 

    if (startNode.toString() != '[object Text]') { 
     startNode = startNode.childNodes[0]; 
    } 

    if (endNode.toString() != '[object Text]') { 
     endNode = endNode.childNodes[0]; 
    } 

    // Got every sorted let's get these co-ordinates 
    var range = document.createRange(); 
    range.setStart(startNode, startPositionInNode); 
    range.setEnd(endNode, endPositionInNode); 

    var rects = range.getClientRects(); // Array of rects 
    var firstRect = rects[0]; 

    var x = firstRect.left; 
    var width = firstRect.right - x; 

    var height = firstRect.bottom - firstRect.top; 
    var y = firstRect.top;   

    var retVal = '{{'+x+','+y+'},{'+width+','+height+'}}'; 

    return retVal; 
} 

Answer 2

如果你的意思是你需要Range對象來獲取文本的ClientRects它可以用這個代碼來完成：

var rangeW3C = document.createRange(), 
    textNode = document.getElementById('someId').firstChild; // assume that it would be point to a text node with content 

rangeW3C.selectNode(textNode); 

// if you need rect of all text node 
var textNodeRect = rangeW3C.getClientRects(); // array-like object with rects 

// if you need rect of some character in text node, for example first character 
rangeW3C.setStart(textNode, 0); 
rangeW3C.setEnd(textNode, 1); 

var firstCharacterRect = rangeW3C.getClientRects()[0];