使用JS,是否有某种方法可以检测到浏览器窗口中可见的文本?

松鼠

使用jQuery,我选择了div中的所有文本

var c = $('#content').text();

但我只想选择在浏览器窗口中正在查看的文本。因此,作为阐明我的想法的一个粗略示例,请看下面的图片:

在此处输入图片说明

应该只返回:

自行车车架是自行车的主要组成部分,车轮和其他

但是如果我要打开浏览器,然后重新运行代码

在此处输入图片说明

自行车车架是自行车的主要部件,其上装有车轮和其他部件。立式自行车的现代且最常见的车架设计基于安全自行车,并由两个三角形,一个主三角形和一个成对的后三角形组成。这被称为菱形框架。1框架需要结实,刚硬和轻巧,通过结合不同的材料和形状来做到这一点。

应该退货。

是否有某种方法可以检测在任何给定时刻在浏览器窗口中可见的文本?

托马诺

是的,您需要测量视口以计算距元素顶部的距离。看到这个小提琴

$.fn.is_on_screen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info       
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
$(window).scroll(function(){ // bind window scroll event
    if( $('.target').length > 0 ) { // if target element exists in DOM
        if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
            $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
        } else {
            $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
        }
    }
});

的HTML

<div class="log">log</div>

scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>


<div class="target label label-info">target element</div>


scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>

的CSS

.log {
    position: fixed;
    right: 20px;
    top: 20px;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用JS,是否可以检测浏览器窗口中的哪些文本?

来自分类Dev

画布:检测在浏览器中是否可见

来自分类Dev

有没有一种方法可以使Chrome浏览器的滚动条更加可见?

来自分类Dev

在浏览器窗口中可见时如何添加类

来自分类Dev

有什么方法可以仅使用javascript检查元素在视口中是否可见?

来自分类Dev

是否可以将node.js控制台配置为在浏览器中可见

来自分类Dev

是否可以在弹出窗口中检测到用户单击事件?

来自分类Dev

是否可以检测到浏览器何时使用后备字体而不是CSS中指定的主要字体?

来自分类Dev

是否检测到浏览器对“滚动到文本片段(:〜:text =)”功能的支持?

来自分类Dev

在OSX上,如何一次重新加载所有可见的浏览器窗口?

来自分类Dev

剔除检测到foreach中是否有可见的

来自分类Dev

有没有一种方法可以使Linux在登录时打开浏览器窗口?

来自分类Dev

是否可以在同一浏览器窗口中实现本机多选项卡 PWA?

来自分类Dev

是否可以将 jasper 报告与 java 一起使用,使其像浏览器窗口中的弹出窗口一样?

来自分类Dev

浏览器如何检测到JS脚本没有响应?

来自分类Dev

浏览器如何检测到JS脚本没有响应?

来自分类Dev

有没有一种方法可以检测调试器是否创建了VSC窗口

来自分类Dev

是否有一种方法可以强制将Azure CDN文件作为浏览器附件下载?

来自分类Dev

有没有一种方法可以提高MSAL浏览器js登录的性能?

来自分类Dev

是否可以将URL从Google Chrome(或其他浏览器)窗口中所有打开的选项卡复制到电子邮件中?

来自分类Dev

使用angularjs在浏览器的新窗口中打开PDF

来自分类Dev

有没有一种方法可以在heroku open中指定heroku使用哪个浏览器?

来自分类Dev

Google Chrome浏览器快捷方式是否可以使用与现有Chrome窗口不同的用户代理?

来自分类Dev

在所有浏览器中,我可以使用哪种方法来获取时区缩写?

来自分类Dev

可见的浏览器回流

来自分类Dev

使用JS刷新浏览器窗口

来自分类Dev

使用JS刷新浏览器窗口

来自分类Dev

有没有一种方法可以调整Web浏览器窗口的大小,以使它们的尺寸为特定的宽度和高度?

来自分类Dev

有没有一种方法可以将单个浏览器的窗口/选项卡拆分为2个查看区域?

Related 相关文章

  1. 1

    使用JS,是否可以检测浏览器窗口中的哪些文本?

  2. 2

    画布:检测在浏览器中是否可见

  3. 3

    有没有一种方法可以使Chrome浏览器的滚动条更加可见?

  4. 4

    在浏览器窗口中可见时如何添加类

  5. 5

    有什么方法可以仅使用javascript检查元素在视口中是否可见?

  6. 6

    是否可以将node.js控制台配置为在浏览器中可见

  7. 7

    是否可以在弹出窗口中检测到用户单击事件?

  8. 8

    是否可以检测到浏览器何时使用后备字体而不是CSS中指定的主要字体?

  9. 9

    是否检测到浏览器对“滚动到文本片段(:〜:text =)”功能的支持?

  10. 10

    在OSX上,如何一次重新加载所有可见的浏览器窗口?

  11. 11

    剔除检测到foreach中是否有可见的

  12. 12

    有没有一种方法可以使Linux在登录时打开浏览器窗口?

  13. 13

    是否可以在同一浏览器窗口中实现本机多选项卡 PWA?

  14. 14

    是否可以将 jasper 报告与 java 一起使用,使其像浏览器窗口中的弹出窗口一样?

  15. 15

    浏览器如何检测到JS脚本没有响应?

  16. 16

    浏览器如何检测到JS脚本没有响应?

  17. 17

    有没有一种方法可以检测调试器是否创建了VSC窗口

  18. 18

    是否有一种方法可以强制将Azure CDN文件作为浏览器附件下载?

  19. 19

    有没有一种方法可以提高MSAL浏览器js登录的性能?

  20. 20

    是否可以将URL从Google Chrome(或其他浏览器)窗口中所有打开的选项卡复制到电子邮件中?

  21. 21

    使用angularjs在浏览器的新窗口中打开PDF

  22. 22

    有没有一种方法可以在heroku open中指定heroku使用哪个浏览器?

  23. 23

    Google Chrome浏览器快捷方式是否可以使用与现有Chrome窗口不同的用户代理?

  24. 24

    在所有浏览器中,我可以使用哪种方法来获取时区缩写?

  25. 25

    可见的浏览器回流

  26. 26

    使用JS刷新浏览器窗口

  27. 27

    使用JS刷新浏览器窗口

  28. 28

    有没有一种方法可以调整Web浏览器窗口的大小,以使它们的尺寸为特定的宽度和高度?

  29. 29

    有没有一种方法可以将单个浏览器的窗口/选项卡拆分为2个查看区域?

热门标签

归档