在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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
javascript 闭包
Sep 15 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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针对多用户实现更换头像功能
2016/09/04 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
ECMAScript6--解构
2017/03/30 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
会议通知
2015/04/15 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书