在 Firefox 中获取可见范围 [英] Get the visible range in Firefox

问题描述

是否可以使用来自 Javascript 或普通 Javascript 的 XUL 函数获取当前视口范围(浏览器内页面的可见部分)?

Is it possible to get the current viewport Range (the visible part of the page inside the browser) using XUL functions from Javascript or plain Javascript?

谢谢！

推荐答案

对于视口你需要使用 document.documentElement.scrollTop/scrollLeft/scrollHeight/scrollWidth.有一点复杂:我认为在 quirks 模式下(document.compatMode 是 "BackCompat")，您需要检查 document.body 而不是 document.documentElement.

For the viewport you need to use document.documentElement.scrollTop/scrollLeft/scrollHeight/scrollWidth. There is a slight complication: I think that in quirks mode (document.compatMode is "BackCompat") you need to check these properties on document.body instead of document.documentElement.

参见 https://developer.mozilla.org/en/DOM/element.scrollTop 用于文档.

编辑:您似乎对视口并不真正感兴趣，而是对它的内容感兴趣.AFAIK 没有通用的方法来获取网页特定区域的内容.它绝对不能由单个 Range 对象描述，而是一组范围.即便如此:如果元素有大量文本并且所有文本都是单个 TextNode，您将不知道文本的哪些部分可见，哪些不可见.

Edit: It seems that you aren't really interested in the viewport but rather its contents. AFAIK there is no generic way to get the contents of a particular area of the web page. It definitely cannot be described by a single Range object, rather a set of ranges. And even then: if the element has lots of text and all of it is a single TextNode, you won't know which parts of the text are visible and which are not.

但是，在某些特殊情况下(特别是当页面结构很简单时)，您或许可以通过使用 range.getBoundingClientRect().您首先选择范围内的所有内容，然后缩小选择范围，直到范围大小在视口边界内.

However, in some special cases (particularly when the page structure is simple) you might be able to learn what text is being displayed by using range.getBoundingClientRect(). You start by selecting everything in your range and reducing that selection until the range size is within viewport boundaries.

这是一个示例，它为包含大量文本的垂直可滚动 <div> 执行此操作:http://jsfiddle.net/5vEdP/(在 Firefox 6、Chrome 14 和 IE 9 中测试).它首先需要确保每个文本字符都放置在它自己的TextNode 中，否则您将无法在Range 对象中单独选择它.然后选择文本的容器并移动范围的开始，直到范围的顶部边界低于容器的顶部边界.然后它通过移动范围的末端对底部边界做同样的事情.最后你会得到一个范围，它只选择了完全可见的文本节点.

Here is an example that does it for a vertically scrollable <div> containing lots of text: http://jsfiddle.net/5vEdP/ (tested in Firefox 6, Chrome 14 and IE 9). It first needs to make sure that each text character is placed into its own TextNode, otherwise you won't be able to select it separately in a Range object. It then selects the container of the text and moves the start of the range until the top boundary of the range is below the top boundary of the container. And then it does the same thing for the bottom boundary by moving the end of the range. In the end you get a range that selected only the text nodes that are fully visible.

这篇关于在 Firefox 中获取可见范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！