博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
初探google toolbar上关键词标记的实现方式
阅读量:4123 次
发布时间:2019-05-25

本文共 978 字,大约阅读时间需要 3 分钟。

 google toolbar的功能之一是把指定的关键字高亮显示出来,只要在搜索框里写上想要高亮显示的内容,再按“切换此网页上搜索字词的标明状态”按扭,网页上所有这些内容就以某种背景显示出来了。猜想要实现“以某种背景显示出来”这个功能,应该是通过CSS,也就是说google toolbar通过调用浏览器的功能,动态的修改网页的内容,并设置了一些CSS样式。为了证实这个想法,我写了一个简单的网页,内容如下:
<
html
>
<
body
>
<
div 
id
=div1
>
 aa bb 
</
div
>
<
textarea 
id
=textarea1
></
textarea
>
<
input 
type
=button 
value
="hehe"
 onclick
="textarea1.value=div1.innerHTML;"
>
</
body
>
</
html
>
我在div1这个层里写了aa和bb这两个词,并设置了一个按扭,点击这个按扭时在下面的一个textarea里显示这个div的innerHTML。因为这个innerHTML是运行时动态取得的,所以它可以反应出被动态修改的HTML内容。
在不打开高亮显示的功能的时候,点击“hehe”,会显示“aa bb”这个简单的内容,而打开高亮显示以后,如果在搜索框里写的是aa,那么再点击hehe,看到的结果是:
<SPAN id=google-navclient-hilite style="COLOR: black; BACKGROUND-COLOR: yellow">aa</SPAN> bb
显然,google toolbar把aa套在了一个span里,还给出了一个id叫“google-navclient-hilite”,为这个span设置了CSS样式为黑色前景和黄色背景。
个人感觉,通过动态修改HTML内容的方式可以实现各种各样有意思的功能,曾经想写一个IE插件,其功能是过滤网页上某些不想看到的内容。例如一个论坛,在贴子列表时不想看到含有某关键字的贴子标题,要实现此功能也不难,只要找到对应的关键字,并向上逐层查找TR标签,找到好动态添加CSS样式:display: none,从而在客户端就把这一行给屏蔽掉不会显示了。不过目前还不会写IE插件,所以一直没写成,呵呵。

转载地址:http://fcopi.baihongyu.com/

你可能感兴趣的文章
DLL中建立进程共享数据段需要注意的语法问题
查看>>
服务器端技术----Http请求的处理过程
查看>>
C语言-预处理指令2-条件编译
查看>>
C语言-预处理指令3-文件包含
查看>>
C语言-变量类型
查看>>
C语言-static和extern关键字1-对函数的作用
查看>>
C 语言-static和extern关键字2-对变量的作用
查看>>
【JavaScript 教程】浏览器—History 对象
查看>>
还不会正则表达式?看这篇!
查看>>
100道+ JavaScript 面试题,助你查漏补缺
查看>>
JavaScript深入理解之闭包
查看>>
这才是学习Vite2的正确姿势!
查看>>
7 个适用于所有前端开发人员的很棒API,你需要了解一下
查看>>
25个构建Web项目的HTML建议,你需要了解一下!
查看>>
【web素材】02-10款大气的购物商城网站模板
查看>>
6种方式实现JavaScript数组扁平化(flat)方法的总结
查看>>
如何实现a===1 && a===2 && a===3返回true?
查看>>
49个在工作中常用且容易遗忘的CSS样式清单整理
查看>>
20种在学习编程的同时也可以在线赚钱的方法
查看>>
隐藏搜索框:CSS 动画正反向序列
查看>>