javascript - Webkit 列查找可见文本的范围

Question

我有一段 HTML，我使用 Webkit 样式表属性在 UIWebView 中显示它。我使用 Webkit 在列中显示 HTML 以模拟一本书。

一次只能看到一列(一列代表一页)。现在，我试图找到可见 HTML 的范围，以便我可以在第一个可见单词之前插入一个 span 元素。

我设法通过使用 JavaScript 函数 document.elementAtPoint(我可能函数名称有误)获得了包含第一个可见单词的 HTML 元素，并更改了它的 CSS 类。但这对我来说不够准确。我需要它准确到第一个可见的单词。

想法是当字体大小增加或减少时，在第一个可见的单词处创建一个分栏符。我可以使用 JavaScript 找出元素在哪一列，并以编程方式将用户滚动到该列，但首先我需要在其中获取元素。

谁能帮帮我？

Answer 1

CSSOM View 模块规范添加了 caretPositionFromPoint(x, y)到 Document 界面，该界面返回指定 x 和 y 坐标的插入符号位置。 WebKit 支持 caretRangeFromPoint ，与早期规范的相似之处，返回 Range .

有可能这个词已经用连字符连接起来，因此跨越两列，所以与其将第一个词包装在一个跨度中，不如考虑更简单的方法，即直接将 span 插入到光标点。这是一个例子:

var caretPos = document.caretRangeFromPoint(x, y);

if (caretPos)
    caretPos.insertNode(document.createElement('span'));

演示(仅限WebKit——点击插入跨度): http://jsfiddle.net/Jordan/Aw9aV/

最后一个考虑:WebKit 可能最终会停止支持 caretRangeFromPoint 以代替 caretPositionFromPoint；如果是这样，您将需要调整您的代码。另请注意，后者返回一个 CaretPosition，它可能未实现 insertNode 方法。该规范仍在 WD 中，因此请注意它仍在不断变化。