&‘米粒

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
js 子页面和父页面交互

 本文来源于http://m.jb51.net/article/41801.htm   如有侵权联系删文

 

父页面

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent</title>
<script>
 function parentFunction() {
  alert('function in parent');
 }

 function callChild() {
  child.window.childFunction();
  /*
   child 为iframe的name属性值，
   不能为id，因为在FireFox下id不能获取iframe对象
  */
 }
</script>
</head>
<body>
<input type="button" name="call child"  value="call child" onclick="callChild()"/>
<br/><br/>
<iframe name="child" src="./child.html" ></iframe>
</body>
</html>

子页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child</title>
<script>
 function childFunction() {
  alert('function in child');
 }

 function callParent() {
$(window.parent.$("#messagediv").html("子页面赋过来的值")); //传值给父页面
  parent.parentFunction();//调用父页面的方法
 }
</script>
</head>
<body>
<input type="button" name="call parent" value="call parent" onclick="callParent()"/>
</body>
</html>

扩展

父页面给子页面传值 父页 $("#child").contents().find("#h_son").val("xxx");//给子页面iframe里的页面h_son 控件赋xxx值

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent</title>
<script>
 function parentFunction() {
  alert('function in parent');
 }

 function callChild() {
   $("#child").contents().find("#h_son").val("xxx");//给子页面iframe里的页面h_son 控件赋xxx值
  child.window.childFunction();
  /*
   child 为iframe的name属性值，
   不能为id，因为在FireFox下id不能获取iframe对象
  */
 }
</script>
</head>
<body>
<input type="button" name="call child"  value="call child" onclick="callChild()"/>
<br/><br/>
<iframe name="child" src="./child.html" ></iframe>
</body>
</html>

 

子页面接收值

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child</title>
<script>
 function childFunction() {
  alert($("#h_son").val());
 }

 function callParent() {
  parent.parentFunction();
 }
</script>
</head>
<body>
<input type="button" name="call parent" value="call parent" onclick="callParent()"/>
    <input type="hidden" id="h_son"/>
</body>
</html>

 

posted on 2016-12-05 11:16  youchim  阅读(219)  评论(0)    收藏  举报