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

目录
相关文章
|
3天前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
11天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
9天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐
|
12天前
|
移动开发 JavaScript 安全
总有一款适合您分享78个JS相册代码
本文分享了78款JS相册代码,包括3D相册旋转木马、图片悬浮效果、倾斜图片幻灯片切换等特效,适用于各种图片展示场景。无论您需要哪种样式,都能在这里找到满意的解决方案。快来挑选吧!参考链接:[点击这里](https://www.vipwb.com/sitemap.xml)。
23 4
|
13天前
|
JavaScript
分享一款520表白节JS代码
今天给大家分享一款JS表白源码 js会随 随机颜色心形跟随鼠标互动520表白节女神表白利器! 修改的话就搜索:LOVEh 就能找到这个英文了。
8 0
分享一款520表白节JS代码
|
20天前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
25 5
|
18天前
|
Web App开发 JavaScript 前端开发
JavaScript基础知识-使用Firefox进行代码的调试(Debug)
关于如何使用Firefox浏览器进行JavaScript代码调试的基础知识介绍。
29 0
|
20天前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
47 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
70 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
63 4