4.iframe子页面与父页面间的方法,属性互相调用

时间:2021-10-12 09:47:15

以下方式亲测可以使用

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>

4.iframe子页面与父页面间的方法,属性互相调用