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

简介: javascript、原生、页面查找

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

<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

目录
相关文章
|
6天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
6天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
8天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
13 0
|
10天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
27天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
15 0
springboot从控制器请求至页面时js失效的解决方法
|
29天前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
27 0
|
10天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
27天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
15 0
|
6天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器
|
6天前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表