在iframe里的页面编写js，实现在父窗口上创建动画效果展

178 阅读 0 评论 118 点赞

我是靠谱客的博主神勇故事，最近开发中收集的这篇文章主要介绍在iframe里的页面编写js，实现在父窗口上创建动画效果展，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<%@ page contentType="text/html; charset=GBK" language="java"%> 
<%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> 
<% 
String query = request.getParameter("query"); 
MMStock2BudgetLogic bean = new MMStock2BudgetLogic(); 
String xmldata = bean.statStock2Budget(); 
%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="0"> 
<title>库存点采购总支出比</title> 
<link rel="stylesheet" href="<%=request.getContextPath() %>/plugins/FusionCharts/Style.css" type="text/css" /> 
<link rel="stylesheet" href="<%=request.getContextPath() %>/framework/sys-resources/css/jsoa.css" type="text/css" /> 
<script language="JavaScript" src="<%=request.getContextPath() %>/plugins/FusionCharts/FusionCharts.js"></script> 
<script language="JavaScript" src="<%=request.getContextPath() %>/plugins/jquery-1.6.4.min.js"></script> 
<script language="JavaScript" src="<%=request.getContextPath() %>/framework/sys-resources/js/common_js/common.js"></script> 
<script language="javascript"> 
var pageName = "530005.jsp"; 
$(function(){ 
if ($('#data_chartdiv').val() != '') { 
showCharts("Line", "chartdiv", 231, 160); 
} 
}); 
function showCharts(chartType, divId, width, height) { 
$('#'+divId).show(); 
var data = $('#data_' + divId).val(); 
var chart = new FusionCharts("<%=request.getContextPath() %>/plugins/FusionCharts/"+chartType+".swf", ""+divId+"", ""+width+"", ""+height+"", "0", "0"); 
chart.setDataXML('<?xml version="1.0" encoding="gbk"?>' + data); 
chart.render(""+divId+""); 
} 
</script> 
<script type="text/javascript"> 
var oMenu; 
function createHtml() { 
try{ 
//oMenu = window.parent.document.getElementById("_div_viewcharts"); 
//if(null == oMenu || undefined == oMenu) { 
var url1 = "<%=request.getContextPath()%>/framework/login_sso.jsp?query=<%=query %>&infokey=checkuser&rand="+Math.random(); 
var url2 = "<%=request.getContextPath()%>/framework/login_sso.jsp?query=<%=query %>&target=/stat_report_jsps/fusioncharts_jsps/53000501.jsp&rand="+Math.random(); 
$.post(url1, function(data) { 
data = eval('('+data+')'); 
//alert(data.msg); 
if (1 == data.ret) { 
var o = document.getElementById("_div_viewcharts"); 
window.parent.document.body.appendChild(o); 
oMenu = window.parent.document.getElementById("_div_viewcharts"); 
var ifrm = getIFrame(); 
oMenu.style.left = eval(getAbsoluteLeft(ifrm) + ifrm.offsetWidth) + "px"; 
oMenu.style.top = getAbsoluteTop(ifrm) + "px"; 
oMenu.innerHTML = '<iframe src="' + url2 + '" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>'; 
// 
$('#pTip').text('×关闭<<'); 
oMenu.style.display = "block"; 
fnLarge(); 
} 
}); 
//} 
} catch (e){ } 
} 
// 
var w = 0; 
var h = 0; 
var mout; 
function emotion(){ 
try{ 
if(w <= 50){ 
oMenu = window.parent.document.getElementById("_div_viewcharts"); 
if(null == oMenu || undefined == oMenu) { 
createHtml(); 
} else { 
$('#pTip').text('×关闭<<'); 
oMenu.style.display = "block"; 
fnLarge(); 
} 
//$(oMenu).show("slow"); 
} else { 
$('#pTip').text('＋展开>>'); 
fnSmall(); 
//$(oMenu).hide("slow"); 
} 
} catch (e){ } 
} 
function fnLarge(){ 
try{ 
if(w < 780){ 
w += 50; 
h += 30; 
oMenu.style.width = w+"px"; 
oMenu.style.height = h+"px"; 
window.setTimeout("fnLarge()",3); 
} 
} catch (e){ } 
} 
function fnSmall(){ 
try{ 
if(w > 0){ 
w -= 50; 
h -= 30; 
oMenu.style.width = w+"px"; 
oMenu.style.height = h+"px"; 
window.setTimeout("fnSmall()",3); 
} else { 
oMenu.style.display = "none"; 
} 
} catch (e){ } 
} 
function mouseOverBody() { 
if (null != oMenu && "none" == oMenu.style.display && w > 0) { 
emotion(); 
} 
} 
function getIFrame() { //IE6.0+ 
if(parent){ 
var f = parent.document.getElementsByTagName("IFRAME"); 
for(var i = 0; i < f.length; i++) { 
if(f[i].contentWindow == self) { 
return f[i]; 
} 
} 
} 
} 
// get absolute TOP position 
function getAbsoluteLeft(ob){ 
if(!ob){return null;} 
var mendingOb = ob; 
var mendingLeft = mendingOb.offsetLeft; 
while( mendingOb != null && mendingOb.offsetParent != null && mendingOb.offsetParent.tagName != "BODY" ){ 
mendingLeft += mendingOb.offsetParent.offsetLeft; 
mendingOb = mendingOb.offsetParent; 
} 
return mendingLeft; 
} 
// get absolute TOP position 
function getAbsoluteTop(ob){ 
if(!ob){return null;} 
var mendingOb = ob; 
var mendingTop = mendingOb.offsetTop; 
while( mendingOb != null && mendingOb.offsetParent != null && mendingOb.offsetParent.tagName != "BODY" ){ 
mendingTop += mendingOb.offsetParent.offsetTop; 
mendingOb = mendingOb.offsetParent; 
} 
return mendingTop ; 
} 
</script> 
<style type="text/css"> 
body{margin:0;padding:0;} 
p{cursor: pointer; margin: 0; padding: 0; font-size: 12px; display: inline;} 
</style> 
</head> 
<body> 
<div class="tit-05"> 
<div style="float:left; color:gray;">>>库存占采购支出比</div> 
<div style="float:right; color:gray;" onclick="emotion();" onmouseover="mouseOverBody()"><p id="pTip">+展开>></p></div> 
</div> 
<div class="insL04-ins"> 
<div id="chartdiv" style="float:left; display:none;"></div> 
</div> 
<input type="hidden" id="data_chartdiv" value="<%=xmldata %>" /> 
<div id="_div_viewcharts" style="position:absolute; border: 2px solid lightblue; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; background: #fff; margin: 1px auto; overflow: hidden; display: none; padding: 0px;"> 
</div> 
</body> 
</html> 