javascript原生代码实现页面查找功能

  1. 云栖社区>
  2. 博客>
  3. 正文

javascript原生代码实现页面查找功能

brick.wan 2019-03-04 16:53:14 浏览1125
展开阅读全文

由于是需在多框架页面中进行搜索,所以先从搜索顺序从左—右。

<input type="button" value="搜 索" onclick="findText(txtFind.value)" style="width:70px;height:28px;font-weight: bold;">
<script language="javascript">
var rng="";
var iframe_next="";
var frame_target=window.parent.document.frames.left_iframe; //默认先搜索左框架
function findText(str){
try{
if(str==""){
alert("请输入搜索的关键字");
return;
}
if(rng.findText(str)){ //若找到,则反白关键字
rng.select();
rng.collapse(false); //迫使开始点移动第一个匹配的范围的结束点
}else{     //否则判断左右框架搜索跳转
if (iframe_next=="right"){ //若当前为右框架,则弹出完成对话框并准备下一步搜索左框架
alert("搜索完毕");
iframe_next="left";
frame_target=window.parent.document.frames.left_iframe;
rng = frame_target.document.body.createTextRange();
}else{ //若当前为左框架,则下一步搜索右框架
iframe_next="right"
frame_target=window.parent.document.frames.right_iframe;
rng = frame_target.document.body.createTextRange();
findText(str);
}
}

}
catch(err){ //由于搜索框放在页面顶部,所以第一次createTextRange会出错,catch里赋值即可。
rng=window.parent.document.frames.left_iframe.document.body.createTextRange();
findText(str);
}
}
</script>

参考资源:
javascript moveStart和moveEnd方法(TextRange对象--查找与选择)
http://hi.baidu.com/mascotdai/blog/item/2538030e979e56c27bcbe1f5.html
用javascript获得参数/编辑SELECT/设置光标位置/页内查找
http://hi.baidu.com/jhfcjl/blog/item/4ceaafec7cadcf4878f05587.html

网友评论

登录后评论
0/500
评论
brick.wan
+ 关注