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


Posted in Javascript onDecember 20, 2011
<%@ 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>

Javascript 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
AngularJs 常用的过滤器
May 15 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 #Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 #Javascript
javascript面向对象编程代码
Dec 19 #Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 #Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
JS获取整个页面文档的实现代码
Dec 15 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
jQuery 解析xml文件
2009/08/09 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python设计模式大全
2016/06/27 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python生成数字图片代码分享
2017/10/31 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
利用python求积分的实例
2019/07/03 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
大学生村官典型材料
2014/01/12 职场文书
火车来了教学反思
2014/02/11 职场文书
公司授权委托书范本
2014/09/18 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书