父页面:parent.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>父页面</title>
<script type="text/javascript" src="third/jquery/jquery-1.11.1.js"></script>
</head>
<body class="easyui-layout" data-options="fit:true" style="border: 1px">
父页面
<input name="pInput" id='pInput' value='inputP'/>
<a href="javascript:void(0)" onclick="callC();">点击这里调用子页面A的函数及元素</a>
<iframe name='aName' id='aId' style="margin-top: 50px " width='98%' height="80%" src='child.jsp' frameborder='1' scrolling="yes" > </iframe>
</body>
</html>
<script type="text/javascript">
function callC(){
var cf = aName.window.alertA();
var val = aName.window.document.getElementById("cInput").value;
alert("子页面函数:"+cf+"---子页面元素:"+val);
}
function alertP(){
return "alertP";
}
</script>
子页面child.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>子页面</title>
<script type="text/javascript" src="third/jquery/jquery-1.11.1.js"></script>
</head>
<body class="easyui-layout" data-options="fit:true">
子页面
<input name="cInput" id='cInput' value='inputC'/>
<a href="javascript:void(0)" onclick="callP();">点击这里调用父页面的函数及元素</a>
</body>
<script type="text/javascript">
function callP(){
var pf = window.parent.alertP();
var val = window.parent.document.getElementById("pInput").value;
alert("父页面函数:"+pf+"---父页面元素:"+val);
}
function alertA(){
return "alertA";
}
</script>
</html>