在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)

复制代码 代码如下:

  <%@ 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>