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

目录
相关文章
|
1天前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
7 1
|
1天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
7 0
|
1天前
|
JavaScript
js实现全屏功能——易懂版
js实现全屏功能——易懂版
5 0
|
2天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
9 0
|
2天前
|
JavaScript 安全 前端开发
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
9 0
|
2天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
8 1
|
4天前
|
JavaScript UED
js得禁止页面滚动
js得禁止页面滚动
11 1
|
4天前
|
JavaScript 前端开发
js选取页面元素的方法
js选取页面元素的方法
12 2
|
9天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
10天前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
5 0