<style type="text/css">
.highlight {
background-color: yellow;
}
</style>
<div width="100%" >
按名称高亮显示:<input type="text" id="text" />
<a id="clear">查询</a>
</div>
<iframe scrolling="no" frameborder="0" name="iframe" id="main_content"
src="<%=iniurl %>"
style="width: 100%; height: 500px; margin: 0; padding: 0"></iframe>
<script>
$(function(){
$('iframe').load(function(){ //确保子页面完成加载
$('#clear').click(highlight);// 点击还原
function highlight() {
clearSelection();//先清空一下上次高亮显示的内容;
var searchText = $('#text').val();//获取你输入的关键字;
if(searchText==null||searchText==''){
alert("关键字不能为空");
}
var regExp = new RegExp(searchText, 'g');//创建正则表达式,g表示全局的,如果不用g,则查找到第一个就不会继续向下查找了;
$('iframe').contents().find('a').each(
function()//遍历文章;
{
var f = 0 ;
f++;
var pos = 'pos'+f;
var html = $(this).html();
var newHtml = html.replace(regExp,
'<span class="highlight" id='+pos+'>' + searchText
+ '</span>');//将找到的关键字替换,加上highlight属性;
$(this).html(newHtml);//更新文章;
});
if(0==$('iframe').contents().find('.highlight').length){
alert("关键字不存在");
}
var t = $('iframe').contents().find("#pos1").offset().top; //得到第一个关键字离top的位置
$(window).scrollTop(t);//滚动到关键字位置
}
function clearSelection() {
$('iframe').contents().find('a').each(function()//遍历
{
$(this).find('.highlight').each(function()//找到所有highlight属性的元素;
{
$(this).replaceWith($(this).html());//将他们的属性去掉;
});
});
}
});
});
</script>
上面为父页面,在子页面中所要查询的文字都包含在<td><a href=""></a></td>当中。