页面iframe内查找关键字,从数据库读取相关文章
来源：互联网 发布：c4d注册机mac版 编辑：程序博客网 时间：2024/06/05 19:18
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'home.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <link rel="stylesheet" href="css/tooltip.css" type="text/css"></link> <script type="text/javascript"> var loaded = false; function load(iframe) { if (!loaded) //Iframe加载后运行 { loaded = true; $.getJSON("search_getWord",//ajax请求function(json) {mainframe=document.getElementById("mainiframe").contentWindow.document;frames=mainframe.getElementsByTagName("frame");//获取子框元素var length=frames.length;for(var i=0;i<length;i++)//遍历子框{var html=frames[i].contentWindow.document.body.innerHTML;var obj = eval(json);//转换json$.each(obj, function(i, item) {//遍历词表 if(html.indexOf(item, 0)!=-1 && item.length>1){//查找关键词，长度为1的不查找 // alert(item); var regexp;//注意表达表达式regexp中的空格不能去掉 if(item[0]>='A'&&item[0]<='Z'){//正则剔除html标签内的关键字大写开头 regexp =eval("/"+item+"(?=s?(es)?[ \WA-Z][^<>]*<)|"+item+"(?=s?(es)?<)/g"); html=html.replace(regexp, function(word)//替换 {return "<font class='keyword' color='red'>"+word+"</font>";} );//关键高亮 } item=item.toLowerCase();//小写开头关键字替换正则 regexp =eval("/[ .\W]"+item+"(?=s?(es)?[ .\W][^<>]*<)|[ .\W]"+item+"(?=s?(es)?[ .\W]?<)/g"); html=html.replace(regexp, function(word)//替换 {return word[0]+"<font class='keyword' color='red'>"+word.substr(1,word.length)+"</font>";} );//关键高亮 }});var data="<div id='data' value='"+i+"'>'</div>";html+=data;frames[i].contentWindow.document.body.innerHTML=html;$(frames[i].contentWindow.document).find(".keyword").bind('mouseleave',function(e) {//mouseout离开词表消失 $("#tooltip").remove();});$(frames[i].contentWindow.document).find(".keyword").bind('mouseenter',function(e){//绑定mouseover，id=$(this).parents("body").find("div").attr("value"); var x = -129;//展示查找列表var y = -90;var iframy=$(frames[id]).offset().top;var iframx=$(frames[id]).offset().left;var scolx=frames[id].contentWindow.document.body.scrollLeft//浏览器兼容+frames[id].contentWindow.document.documentElement.scrollLeft;var scoly=frames[id].contentWindow.document.body.scrollTop//浏览器兼容+frames[id].contentWindow.document.documentElement.scrollTop;//var scolx=$(this).parents("body").scrollLeft(); var sy=$(this).offset().top-scoly+y+iframy;var sx=$(this).offset().left-scolx+x+iframx; var r=$(this).text();if(sy<0){sy=10;sx=sx-10;}if(sx<0){sx=0;}$.getJSON("search_search?key=" + r+"&many=7",//显示6条，7条判断更多function(json) {var tt = "";var obj = eval(json);$.each(obj, function(i, item) {if(item.length>28){item=item.substr(0,28)+"...";}if(i<6){tt = tt + '\n' + "<a href='' style='TEXT-DECORATION: none;color:black' title="+item+">"+item+"</a></br>";}else tt=tt+"More";});var tooltip = "<div id='tooltip' class='tooltip'><a href=''><font color='red'>" + tt + "</a></div>";var Newdiv=document.createElement("div");Newdiv.id="tooltip";Newdiv.class="tooltip"; frames[id].appendChild(Newdiv);$("body").append(tooltip);//绑定显示栏$("#tooltip").css({"top" : sy + "px","left" : sx+ "px"}).animate({opacity: "show", top: (sy-10)}, "300");}); });} }); } } </script> </head> <body> <iframe src="Overview.html" id="mainiframe" width="1200" height="600" frameborder="0" scrolling="auto" onload="load(this)"></iframe> </body></html>通过ajax从后台读取词表，通过正则表达式将页面内将非标签的关键字高亮(主要是根据 "keyword<"这种关键字判断)，之后每当在页面Iframe内进行在关键字上mouseenter,用ajax从后台查找相关内容，用一个iframe展示，里面嵌套iframe和frame。 因为测试代码和格式有些粗糙，只给出了js代码，后台用lucene全文检索
这里需要通过AJAX,执行后台getword，将词表传到前台。还要设置AJAX,执行search，查找结果。设置tooltip的样式，
这里有个BUG就是这里的mouseover,mouseout，的冒泡时间没处理，在chromium不会有问题。
可以实现像有道一样页面查找单词解释，不过要改事件触发
0 0
- 页面iframe内查找关键字,从数据库读取相关文章
- 从父页面读取和操作iframe中内容方法
- 从父页面读取和操作iframe中内容方法
- （一）上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）
- （二）上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）
- 上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(1)
- 上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(2)
- 查找页面关键字
- JS页面内查找
- iframe相关页面的调用
- 优化页面相关文章
- 从数据库读取图片输出到页面中
- 从数据库中读取图片显示在前台页面
- IFRAME内页面刷新父窗体
- IFRAME内页面刷新父窗体
- js获取页面内iframe的高度
- 改变iframe内嵌页面的字体
- iframe动态改变内嵌页面高度
- Java Object Initialization
- 书目记录
- linux时钟机制(二)-时钟初始化
- 心情真好
- 另类电商年入上亿美金，Amazon评论中掘金
- 页面iframe内查找关键字,从数据库读取相关文章
- 你是把我这里当跳板呢
- Tomcat 部署java项目三种方式
- LA3942 Remember the world
- 梦痕已逝
- 一个简单的100以内的猜字游戏
- 越来越慢的微信，请温习一下谷歌的极简追求
- 2014年全国计算机等级考试报考指南汇总
- 谷歌服务框架_谷歌服务框架下载_谷歌服务框架全版本整理
