页面iframe内查找关键字,从数据库读取相关文章

最新推荐文章于 2021-04-12 19:47:33 发布

sky234537667

最新推荐文章于 2021-04-12 19:47:33 发布

阅读量997

点赞数

分类专栏： java or js

本文链接：https://blog.csdn.net/sky234537667/article/details/19681293

版权

java or js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏


<%@ 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" οnlοad="load(this)"></iframe>
  </body>
</html>







通过ajax从后台读取词表，通过正则表达式将页面内将非标签的关键字高亮(主要是根据  "keyword<"这种关键字判断)，之后每当在页面Iframe内进行在关键字上mouseenter,
用ajax从后台查找相关内容，用一个iframe展示，里面嵌套iframe和frame。 因为测试代码和格式有些粗糙，只给出了js代码，后台用lucene全文检索
这里需要通过AJAX,执行后台getword，将词表传到前台。还要设置AJAX,执行search，查找结果。设置tooltip的样式，
这里有个BUG就是这里的mouseover,mouseout，的冒泡时间没处理，在chromium不会有问题。
可以实现像有道一样页面查找单词解释，不过要改事件触发

sky234537667

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面iframe内查找关键字,从数据库读取相关文章

<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> My JSP 'test.jsp' starting
复制链接

扫一扫

专栏目录