在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"231160);
                }
            });
            
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()"><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>
posted @ 2011-12-19 15:53 blueKnight Views(...) Comments(...) Edit 收藏