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

brick.wan 2019-03-04

云栖社区 移动开发与客户端 前端与交互设计 javascript html5 html Blog

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

<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

登录 后评论
下一篇
我是你爱豆
7879人浏览
2019-08-22
相关推荐
web前端系列面试题(一)
571人浏览
2018-08-21 15:10:00
前端工程师面试题汇总(转)
613人浏览
2018-05-24 15:45:00
如何从零起步开发一款App
2462人浏览
2018-05-29 15:32:37
JavaScript的模块讲解
224人浏览
2018-01-04 20:16:47
AMD终极揭秘
872人浏览
2014-08-30 12:25:00
Weex和Web开发体验的异同
4709人浏览
2017-01-20 10:25:02
译:selenium webdriver (python)
3242人浏览
2016-04-28 17:29:44
jQuery编程的最佳实践
739人浏览
2017-05-02 14:51:00
0
0
0
742