在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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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 身份证号验证函数
2009/05/07 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python实现控制台打印的方法
2019/01/12 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
使用python实现kNN分类算法
2019/10/16 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
普罗米修斯教学反思
2014/02/06 职场文书
工伤事故证明
2014/10/20 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2015年试用期工作总结
2014/12/12 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Javascript webpack动态import
2022/04/19 Javascript