java iframe 父子之间的调用

最新推荐文章于 2021-02-27 03:03:03 发布

iteye_16498

最新推荐文章于 2021-02-27 03:03:03 发布

阅读量134

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_16498/article/details/82579719

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

注：原创作品，分享以供交流出处，转载请注明出处。
本博文环境IE8及以上，部分实例在firefox中不支持。
本博文实例的三个iframe在同域下。

总结：
1，子iframe访问父iframe中的元素。

 parent.document.getElementById('parentInput');

2，父iframe访问子iframe中的元素（注：fireFox中不可以）。

document.frames['childIframe2'].document.getElementById('child2Input');

3，子页面访问父页面js全局变量及函数

var parentVariable = parent.parentVarName;

//parentVarName是父页面中的全局变量。

 onclick="parent.parentFunction();

"//parentFunction是父页面上的函数。

实例：
1，父页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
       //定义父页面上的全局变量
       var parentVarName = "chenchaoyang";

       //在父页面给子页面2上的input输入框赋值
       function fuzhiChild2Input()
       {
    	   //下面这句在fireFox中可用，在ie下不可用
    	   //var child2Input = document.getElementById('childIframe2').contentDocument.getElementById("child2Input");

    	   //下面这句在ie下可用，在fireFox中不可用
    	   var child2input = document.frames['childIframe2'].document.getElementById('child2Input');
    	   child2input.value="chenchaoyang";
       }

       //定义父页面上的函数（供子页面调用）
       function parentFunction()
       {
    	   alert("呵呵，这是父页面上的函数");
       }
    </script>
  </head>
  <body>
     <iframe id="childIframe1" src="child1.jsp"></iframe>
     <iframe id="childIframe2" src="child2.jsp"></iframe>
     <input type="text"  id="parentInput"/>
     <input type="button" id="parentButton" onclick="fuzhiChild2Input();" value="给子页面2上的输入框赋值"/>
  </body>
</html>

2,子页面1

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <script type="text/javascript">
        //在子页面1上给父页面上的输入框赋值，在fireFox，ie中均可用
        function getParentElement()
        {
        	var parentInput = parent.document.getElementById('parentInput');
        	parentInput.value = "chenchaoyang";
        }

        //获取父页面上的全局变量
        function getVarFromParent()
        {
        	var parentVariable = parent.parentVarName;
        	alert(parentVariable);
        }
     </script>
  </head>
  <body>
               这是子页面1
      <input type="button" value="给父页面上的输入框赋值" onclick="getParentElement();">
      <input type="button" value="获取父页面上的全局变量" onclick="getVarFromParent();">
      <input type="button" value="调用父页面上的函数" onclick="parent.parentFunction();">
  </body>
</html>

3,子页面2

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  <body>
                   这是子页面2
       <input type="text" id="child2Input"/>
  </body>
</html>

iteye_16498

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java iframe 父子之间的调用

注：原创作品，分享以供交流出处，转载请注明出处。本博文环境IE8及以上，部分实例在firefox中不支持。本博文实例的三个iframe在同域下。总结：1，子iframe访问父iframe中的元素。 [code="java"] parent.document.getElementById('parentInput');[/code]2，父iframe访问子i...
复制链接

扫一扫

专栏目录