以下方式亲测可以使用
1.建议一个动态web工程,本人使用的是eclipse,建立两个jsp页面及一个jquery插件,一个是父页面,一个子页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
var parVal = '我是父页面默认变量值!!';
function parentToChild(){
//获取子页面窗口对象
var childWin = document.getElementById('frame1').contentWindow;
//调用子页面对象
childWin.childtest();
//获取子页面标签对象,并修改
var childInp1 = childWin.document.getElementById('inp1');
childInp1.value='js修改子页面inp1的值';
}
$(function(){
$("#btn").click(function(){
//获取子页面窗口对象
var childjq = $("#frame1").contents();
//获取子页面标签对象
var inp1val = childjq.find("#inp1");
//为子标签属性赋值
inp1val.val('jquery修改子页面inp1的值')
});
});
function childToParent(){
alert('我是父页面 childToParent 方法,待子页面调用');
}
</script>
<body>
<div>父页面</div>
<div>
<input id="pInput1" value="我是父页面-pInput1-的值">
</div>
<iframe id="frame1" style="width: 400px;height: 400px;margin-top: 20px" src="child.jsp"></iframe>
<button onclick="parentToChild()">父页面调用子页面</button>
<button id="btn" onclick="parentToChildJquery()">父页面调用子页面==jquery</button>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
function childtest(){
//$("#inp1").val('修改inp1的值');
alert('子页面供父页面调用,测试方法');
}
function childToP(){
// 下面两种操作父页面方法的方式一样
// window.parent.childToParent();
parent.childToParent();
var parInp = window.parent.document.getElementById('pInput1');
parInp.value='通过子页面js赋值';
}
$(function(){
$("#btn3").click(function(){
//获取父页面标签对象
var parInp = parent.$("#pInput1");
//通过jquery为父页面对象赋值
parInp.val('通过子页面jquery赋值')
//调用父页面方法
parent.childToParent();
}) ;
});
</script>
<body>
<div >iframe子页面测试</div>
<input style="margin-top: 50px" id="inp1" value="通过父页面来修改此值~~~">
<button id="btn2" onclick="childToP()">js子页面调用父页面</button>
<button id="btn3">jquery子页面调用父页面</button>
</body>
</html>