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

最新推荐文章于 2025-10-22 11:19:31 发布

转载最新推荐文章于 2025-10-22 11:19:31 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_35241080/article/details/80370492

文章标签：

#iframe #html

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一种在父页面与子页面(iframe)间进行数据传递和方法调用的技术方案，包括使用纯JS和jQuery两种方式实现父页面向子页面发送数据，以及子页面向父页面发送数据的方法。

以下方式亲测可以使用

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>

è¿éåå¾çæè¿°