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

所属分类: 网络编程 / JavaScript 阅读数: 1517
收藏 0 赞 0 分享
复制代码 代码如下:

<%@ 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 LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多