以下方式亲测可以使用
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>