在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 相关文章推荐
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
JavaScript作用域链示例分享
May 27 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
vue二级路由设置方法
Feb 09 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
JavaScript版代码高亮
2006/06/26 Javascript
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
js闭包实例汇总
2014/11/09 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
自动化专业个人求职信范文
2013/12/30 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
教师暑期培训感言
2014/08/15 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
团结主题班会
2015/08/13 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript