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

zoukankan html css js c++ java

在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>

查看全文

相关阅读:
前端时间个性化插件 jquery.timeago.js
IP釋放、清除、以及刷新DNS
Visual Studio 2019 16.0 正式版下载
 handlebars.js 用 <br>替换掉内容的换行符
 c#-SimHash匹配相似-算法
 索尼Sony ATI显卡驱动 Win7 Win8 Win8.1 视频黑屏解决方法
 c#-冒泡排序-算法
 c#-二分查找-算法
 c#-快速排序-算法
 win8.1中安装sql2014 0x800F0906 【 Error while enabling Windows feature : NetFx3, Error Code : -2146498298 】

原文地址：https://www.cnblogs.com/ding0910/p/2293499.html