本文共 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/