jiangshangfeilong
- 浏览: 14135 次
- 性别:
- 来自: 西安
-
最新评论
我要实现的功能是这样的，test.jsp是一个饼状图，是别人做好的完整的页面，我想在我的页面index.jsp中嵌入test.jsp
当然就用到了iframe了，但是这样就有个问题，子页面中的饼状图是自动刷新的，父页面无法实时的把数据传给子页面，
我的办法是:在子页面中调用父页面中js方法，获取返回值。
具体代码如下：
index.jsp:
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
//这是子页面将要调用的方法
function f(){
return "yyy,90,kkk,100,uu,80";
}
</script>
<body>
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><iframe scrolling="yes" src="test.jsp" width="600" height="600"></iframe><!--这里是我要加入的页面-->
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
test.jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<HEAD>
<title>饼状图</title>
<Meta http-equiv="Refresh" Content="10">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<STYLE> v\:* { Behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var onit=true;
var num=0;
var stat_array = new Array();
function moveup(iteam,top,txt,rec)
{
temp = eval(iteam);
tempat = eval(top);
temptxt = eval(txt);
temprec = eval(rec);
at = parseInt(temp.style.top);
temprec.style.display = "";
if (num > 27)
{
temptxt.style.display = "";
}
if(at>(tempat-28) && onit)
{
num++;
temp.style.top = at-1;
Stop=setTimeout("moveup(temp,tempat,temptxt,temprec)",10);
}
else
{
return;
}
}
function movedown(iteam,top,txt,rec)
{
temp = eval(iteam);
temptxt = eval(txt);
temprec = eval(rec);
clearTimeout(Stop);
temp.style.top = top;
num = 0;
temptxt.style.display = "none";
temprec.style.display = "none";
}
function ontxt(iteam,top,txt,rec)
{
temp = eval(iteam);
temptxt = eval(txt);
temprec = eval(rec);
if (onit)
{
temp.style.top = top-28;
temptxt.style.display = "";
temprec.style.display = "";
}
}
function movereset(over)
{
if (over==1)
{
onit=false;
}
else
{
onit=true;
}
}
function createXMLHttp()
{
var xmlObj;
if(window.XMLHttpRequest)
{
xmlObj = new XMLHttpRequest();
if(xmlObj.overrideMimeType)
xmlObj.overrideMimeType('text/xml');
}
else if(window.ActiveXObject)
{
try
{
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
return xmlObj;
}
catch(e)
{
try
{
xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
return xmlObj;
}
catch(e)
{
try
{
xmlObj=new ActiveXObject("MSXML2.ServerXMLHTTP");
return xmlObj;
}
catch (e)
{
return false;
}
}
}
}
else
{
return false;
}
}
function readFile(url)
{
if (createXMLHttp())
{
xmlUrl = createXMLHttp();
}
xmlUrl.Open("GET",url);
xmlUrl.Send();
while (xmlUrl.readyState == 4)
{
return bytes2BSTR(xmlUrl.ResponseBody);
}
}
function table(num,table_left,table_top,all_width,all_height,table_title,unit)
{
var allvalues=0;
var color = new Array();
var bg_color = new Array(num);
var pie = new Array(num);
color[0]="#ff8c19";
color[1]="#ff1919";
color[2]="#ffff19";
color[3]="#1919ff";
color[4]="#19ff19";
color[5]="#fc0000";
color[6]="#3cc000";
color[7]="#ff19ff";
color[8]="#993300";
color[9]="#f60000";
for (i=0,j=0; i<num; i++,j++)
{
bg_color[i] = color[j];
if (j == color.length)
{
j = -1;
}
}
for (i=0; i<num; i++)
{
allvalues += stat_array[0][i];
}
var k = 0;
for (i=0; i<num-1; i++)
{
pie[i] = parseInt((stat_array[0][i])/allvalues*10000)/10000;
k += pie[i];
}
pie[num-1] = 1-k;
document.writeln("<v:shapetype id='Cake_3D' coordsize='21600,21600' o:spt='95' adj='11796480,5400' path='al10800,10800@0@0@2@14,10800,10800,10800,10800@3@15xe'></v:shapetype>");
document.writeln("<v:shapetype id='3dtxt' coordsize='21600,21600' o:spt='136' adj='10800' path='m@7,l@8,m@5,21600l@6,21600e'>");
document.writeln("<v:path textpathok='t' o:connecttype='custom' o:connectlocs='@9,0;@10,10800;@11,21600;@12,10800' o:connectangles='270,180,90,0'/>");
document.writeln("<v:textpath on='t' fitshape='t'/>");
document.writeln("<o:lock v:ext='edit' text='t' shapetype='t'/>");
document.writeln("</v:shapetype>");
document.writeln("<v:rect id='background' style='position:absolute;left:" + table_left + "px;top:" + table_top + "px;WIDTH:" + all_width + "px;HEIGHT:" + all_height + "px;' fillcolor='#EFEFEF' strokecolor='gray'>");
document.writeln("<v:shadow on='t' type='single' color='silver' offset='4pt,4pt'/>");
document.writeln("</v:rect>");
document.writeln("<v:group ID='table' style='position:absolute;left:" + table_left + "px;top:" + table_top + "px;WIDTH:" + all_width + "px;HEIGHT:" + all_height + "px;' coordsize = '21000,11500'>");
document.writeln("<v:Rect style='position:relative;left:500;top:200;width:20000;height:800'filled='false' stroked='false'>");
document.writeln("<v:TextBox inset='0pt,0pt,0pt,0pt'>");
document.writeln("<table width='100%' border='0' align='center' cellspacing='0'>");
document.writeln("<tr>");
document.writeln("<td align='center' valign='middle'><div style='font-size:15pt; font-family:黑体;'><B>" + table_title + "</B></div></td>");
document.writeln("</tr>");
document.writeln("</table>");
document.writeln("</v:TextBox>");
document.writeln("</v:Rect> ");
document.writeln("<v:rect id='back' style='position:relative;left:500;top:1000;width:20000; height:10000;' onmouseover='movereset(1)' onmouseout='movereset(0)' fillcolor='#9cf' strokecolor='#888888'>");
document.writeln("<v:fill rotate='t' angle='-45' focus='100%' type='gradient'/>");
document.writeln("</v:rect>");
document.writeln("<v:rect id='back' style='position:relative;left:15000;top:1400;width:5000; height:" + ((num+1)*9000/11+200) + ";' fillcolor='#9cf' stroked='t' strokecolor='#0099ff'>");
document.writeln("<v:fill rotate='t' angle='-175' focus='100%' type='gradient'/>");
document.writeln("<v:shadow on='t' type='single' color='silver' offset='3pt,3pt'/>");
document.writeln("</v:rect>");
document.writeln("<v:Rect style='position:relative;left:15500;top:1500;width:4000;height:700' fillcolor='#000000' stroked='f' strokecolor='#000000'>");
document.writeln("<v:TextBox inset='8pt,4pt,3pt,3pt' style='font-size:11pt;'><div align='left'><font color='#ffffff'><B>总数:" + allvalues + unit + "</B></font></div></v:TextBox>");
document.writeln("</v:Rect> ");
for (i=0; i<num; i++)
{
document.writeln("<v:Rect id='rec" + i + "' style='position:relative;left:15400;top:" + Math.round((i+1)*9000/11+1450) + ";width:4300;height:800;display:none' fillcolor='#efefef' strokecolor='" + bg_color[i] + "'>");
document.writeln("<v:fill opacity='.6' color2='fill darken(118)' o:opacity2='.6' rotate='t' method='linear sigma' focus='100%' type='gradient'/>");
document.writeln("</v:Rect>");
document.writeln("<v:Rect style='position:relative;left:15500;top:" + Math.round((i+1)*9000/11+1500) + ";width:600;height:700' fillcolor='" + bg_color[i] + "' stroked='f'/>");
document.writeln("<v:Rect style='position:relative;left:16300;top:" + Math.round((i+1)*9000/11+1500) + ";width:3400;height:700' filled='f' stroked='f'>");
document.writeln("<v:TextBox inset='0pt,5pt,0pt,0pt' style='font-size:9pt;'><div align='left'>" + stat_array[1][i] + ":" + stat_array[0][i] + unit + "</div></v:TextBox>");
document.writeln("</v:Rect> " );
}
document.writeln("</v:group>");
var k1 = 180;
var k4 = 10;
for (i=0; i<num; i++)
{
k2 = 360 * pie[i]/2;
k3 = k1 + k2;
if (k3 >= 360)
{
k3 = k3 - 360;
}
kkk = (-11796480 * pie[i] + 5898240);
k5 = 3.1414926 * 2 * (180-(k3-180))/360;
R = all_height/2;
txt_x = table_left + all_height/8-30 + R + R * Math.sin(k5) * 0.7;
txt_y = table_top + all_height/14-39 + R + R * Math.cos(k5) * 0.7 * 0.5;
titlestr = " 名 称：" + stat_array[1][i] + " 数 值：" + stat_array[0][i] + unit + " 所占比例：" + pie[i]*100 + "% "
document.writeln("<div style='cursor:hand;'>");
document.writeln("<v:shape id='cake" + i + "' type='#Cake_3D' title='" + titlestr + "'");
document.writeln("style='position:absolute;left:" + table_left+all_height/8 + "px;top:" + table_top+all_height/14 + "px;WIDTH:" + all_height + "px;HEIGHT:" + all_height + "px;rotation:" + k3 + ";z-index:" + k4 + "'");
document.writeln("adj='" + kkk + ",0' fillcolor='" + bg_color[i] + "' onmouseover='moveup(cake" + i + "," + (table_top+all_height/14) + ",txt" + i + ",rec" + i + ")'; onmouseout='movedown(cake" + i + "," + (table_top+all_height/14) + ",txt" + i + ",rec" + i + ");'>");
document.writeln("<v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>");
document.writeln("<o:extrusion v:ext='view' on='t'backdepth='25' rotationangle='60' viewpoint='0,0'viewpointorigin='0,0' skewamt='0' lightposition='-50000,-50000' lightposition2='50000'/>");
document.writeln("</v:shape>");
document.writeln("<v:shape id='txt" + i + "' type='#3dtxt' style='position:absolute;left:" + txt_x + "px;top:" + txt_y + "px;z-index:20;display:none;width:50; height:18;' fillcolor='#ffffff'");
document.writeln("onmouseover='ontxt(cake" + i + "," + (table_top+all_height/14) + ",txt" + i + ",rec" + i + ")'>");
document.writeln("<v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>");
document.writeln("<v:textpath style='font-family:'宋体';v-text-kern:t' trim='t' fitpath='t' string='" + pie[i]*100 + "%'/>");
document.writeln("<o:extrusion v:ext='view' backdepth='8pt' on='t' lightposition='0,0' lightposition2='0,0'/>");
document.writeln("</v:shape>");
document.writeln("</div>");
k1 = k1+k2*2;
if (k1 >= 360)
{
k1 = k1-360;
}
if (k1 > 180)
{
k4 = k4+1;
}
else
{
k4 = k4-1;
}
}
}
function begin(path, width, height, title, unit)
{
stat_array[0] = new Array();
stat_array[1] = new Array();
//var str = readFile(path);
var strArray = new Array();
//var regExp = /\s+/g;
var len = 0;
strArray = path.split(",");
for (i=0; i<strArray.length/2; i++)
{
stat_array[1][i] = strArray[i*2];
stat_array[0][i] = Math.round(parseInt(strArray[i*2+1]));
}
if (stat_array[0].length > stat_array[1].length){
len = stat_array[1].length;
}else{
len = stat_array[0].length;
}
table(len,0,0,width,height,title,unit);
}
</SCRIPT>
</HEAD>
<body>
<script language="javascript">
var s=parent.window.f(); //调用父页面的js方法
// 参数说明（数据文件路径，图像宽度，图像高度，图像名称，单位）
begin(s, 600, 400, '初三（1）班期末成绩三维饼状图', '分');
</script>
</body>
</HTML>
0
顶
顶
0
踩
踩
分享到：
发表评论
相关推荐
总结，`iframe`中的JavaScript交互涉及到页面间的通信，无论是父页面调用子页面还是子页面调用父页面，都需要理解`window`对象、同源策略以及跨域通信机制。正确使用这些技术，可以在多页面应用中实现更复杂的功能...
"iframe子父页面调用js函数示例" 在实际项目中，iframe 子父页面调用 js 函数是非常有用的。下面是一个示例，演示如何在 iframe 子页面中调用父页面的 js 函数，以及如何在父页面中调用 iframe 子页面的 js 函数。 ...
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
在EasyUI中，我们可能会遇到需要在弹出窗口（子页面）与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先，让我们理解标题中的“弹出window窗口传值”。在EasyUI中，创建一个弹出窗口...
JavaScript实现IFrame子窗口调用父窗口的全局变量
本篇文章将详细讲解如何在`iframe`子页面调用父页面的JS函数以及反之的操作。 ### 1. 子页面调用父页面的JS函数 在`iframe`子页面中，要调用父页面的JavaScript函数，可以使用`window.parent`对象来引用父窗口。...
子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 比如调用a()函数，就写成： 代码如下:window.parent.a(); 但是我在chrome浏览器下却发现此...
标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先，我们需要了解IFrame（内联框架）的基本...
在Web开发中，"父窗口调用iframe子窗口方法"是一个常见的交互场景，尤其是在构建复杂的单页面应用或者需要跨窗口通信时。这篇文章将详细讲解如何实现这个功能，并提供相关的源码示例。 首先，理解基本概念。`iframe...
因此，这里提到的方法和实例都基于同源策略，即父页面和iframe页面属于同一域名。如果尝试在不同源的iframe中操作元素，将会遇到跨域访问限制，这是由浏览器的安全机制决定的。 在具体实现上，我们可以使用jQuery...
### Iframe父页面与子页面互相调用 在Web开发中，经常需要用到iframe来嵌套显示其他页面。本文将通过一个具体的示例介绍如何实现iframe中的父页面与子页面之间的互相调用，以及子页面中再嵌套iframe时的相关操作。 ...
要解决iframe跨域调用父页面js方法的问题，我们可以利用以下几种技术： 1. **HTML5的postMessage和message事件**：这是现代浏览器支持的一种跨域通信方式。在iframe中，我们可以使用`window.parent.postMessage...
在Web开发中，子页面和父页面的交互是常见...在`parent.html`和`childPage.html`中，你可以结合这些技术实现子页面调用父页面的方法，或者父页面向子页面传递数据。记得在实际应用中考虑到安全性、性能和兼容性等问题。
下面我们将详细介绍`js`中`iframe`调用父页面方法的相关知识点。 1. **基本调用方式** 在`iframe`中的页面，可以通过`window.parent`属性来访问父页面的全局对象，从而调用父页面中定义的函数。例如，如果父页面有...
// 然后，可以调用iframe页面中的函数 frames.right(); ``` 这里的`window.parent.window`用于返回到包含`iframe`的上一级窗口，然后通过`getElementById`找到`iframe`元素，进一步获取它的`contentWindow`属性，这...
在JavaScript编程中，"子页面调用父页面"是一种常见的交互方式，特别是在构建多级页面结构或者使用iframe嵌套页面的场景下。这种技术允许子页面与包含它的父页面进行通信，实现数据传递、功能控制等多种功能。下面将...
然而，当涉及到`iframe`与父页面之间的通信时，就需要用到一些特殊的方法来实现数据的传递和函数调用。本篇文章将深入探讨如何在`iframe`与父页面之间进行值的传递以及方法的互相调用。 首先，我们可以通过...
在标题和描述中提到的"frameset父页面和子页面的方法之间调用个属性的调用"，涉及到的是跨框架通信的概念。当一个`frameset`中有多个`frame`或`iframe`时，它们之间可能需要进行数据交换或操作交互。这种交互可以...
6. **易于使用**：由于描述中提到，所有代码都在子页面内部，这意味着用户只需要在子页面中引入必要的JavaScript和CSS，然后调用相关的函数即可，无需修改父页面的代码，提高了代码的可维护性和复用性。 在提供的`...