原文:Iframe父页面与子页面之间的调用

Iframe父页面与子页面之间的调用

专业词语解释如下：

    Iframe：iframe元素是文档中的文档。

    window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象。但是，如果一个文档定义了一个或者多个框架(即：包含一个或者多个frame或者iframe标签)，浏览器就会为原始文档创建一个window对象，再为每个iframe创建额外的window对象，这些额外的window对象是原始窗口的子窗口。

contentWindow: 是指指定的iframe或者iframe所在的window对象。

如果想要学习 "iframe之间的通信问题及iframe高度自适应"，请看这边文章：

iframe之间的通信问题及iframe高度自适应

父页面与子页面之间的调用。

现在我们可以慢慢做demo来分别讲解下，假如有iframe父页面为 iframe1.html, 父页面上有2个子页面 分别为iframe2.html 和 iframe3.html。

父页面iframe1.html代码如下：

<!doctype html>

<html lang="en">

 <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery1.7.js"></script>

 </head>

 <body>

    <iframe src="http://localhost/iframe/iframe3.html" id = "iframe3"></iframe>

    <iframe src="http://localhost/iframe/iframe2.html" id = "iframe2"></iframe>

    <div class="iframe1">父页面</div>

   <script>

	function test2() {

	    console.log(1);

	}

   </script>

</body>

</html>

子页面iframe2.html代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <script src="jquery1.7.js"></script>

 </head>

 <body>

	<div id="test">aaa</div>

	<div class="iframe2">子页面</div>

       <script>

           function b() {

	       console.log("我是子页面");

	   }

	   function iframe3Page() {

	       console.log("iframe3页面调用iframe2页面");

	   }

      </script>

</body>

</html>

1.  子页面iframe2.html调用父页面 iframe1.html的元素如下代码：

console.log($('.iframe1',parent.document));

2. 子页面iframe2.html调用父页面iframe1.html的函数如下代码：

 parent.test2();

注意：父页面iframe1.html页面 中test2方法不能放在$(function(){}), 放在里面就调用不到。

3.     子页面iframe2.html调用自身的iframe(假如父页面有很多iframe，获取自身iframe不通过id或者name属性).

       1.  首先我们可以在父页面上写一个函数 用来获取页面所有的iframe，之后进行遍历，进行判断当前的window对象是否相同。如下代码：

 function getFrame(f){

        var frames = document.getElementsByTagName("iframe");

         for(i=0;i<frames.length;i++){

                if(frames[i].contentWindow == f){

                     return(frames[i])

                 }

           }

  }

2. 在子页面iframe2.html中如下调用父页面的方法 getFrame.

/* 获取自身的iframe */

var aa = parent.getFrame(this);

 console.log(aa);

$(aa).attr("flag",true);

给iframe2设置属性 flag: true, 如下截图：

4.  父页面iframe1.html调用子页面 iframe2.html的元素及函数

    如下调用有误的：

console.log(document.getElementById("iframe2").contentWindow.b());

因为iframe2.html 有可能未加载完成，所以要等iframe2加载完成后再进行调用，所以我们需要 iframe2.onload = function(){}; 这样再进行调用。为了兼容IE，我们可以如下封装一个方法：

function iframeIsLoad(iframe,callback){

        if(iframe.attachEvent) {   

               iframe.attachEvent('onload',function(){

                     callback && callback();

               });

         }else {

                 iframe.onload = function(){

                      callback && callback();

                 }

         }

   }

调用方式如下：

// 父页面调用子页面iframe2的方法

var iframe2 = document.getElementById("iframe2");

iframeIsLoad(iframe2,function(){

       iframe2.contentWindow.b();   // 打印出 我是子页面    

       // 父页面获取子页面iframe2的元素

       var iframeDom = $(".iframe2",iframe2.contentWindow.document);

       console.log(iframeDom);

});

Iframe父页面与子页面之间的调用的更多相关文章

  1. iframe父窗口和子窗口之间的调用

    1>父窗口获取子窗口 js方法 document.getElementById('if1').contentWindow.document: window.frames["if1&qu ...

  2. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  3. iframe 框架 父页面与子界面之间的变量、函数、元素获取

    1.获取页面上的iframe 1-1. document.getElementById('iframeId'): 1-2. window.frames[0].window.frames['frameN ...

  4. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  5. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  6. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  7. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  8. iframe父页面与子页面赋值

    最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...

  9. JavaScript从父页面获取子页面的值（子页面又如何访问父页面）

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

随机推荐

  1. table插入标签form标记怪现象

    最近帮朋友处理问题,它无法提交表单,得到一些时间,我发现了一个奇怪的问题 <table> <form action="upload.php" method=&qu ...

  2. Unity 二战中加飞机

    一个简短的引论: 谢意: 本申请中使用<Unity3D\2D移动游戏开发>提供资源.著作权属于作者.感谢作者.基于原始时本申请的二次开发. 要素: 1.增加2s cd的机身旋转,旋转时保持 ...

  3. TCP与UDP的侵略性

    HTTP必须执行在TCP上吗?SSL必须执行在TCP上吗?...实际上HTTP并没有规定一定要执行在TCP上,甚至FTP也不一定要执行在TCP上!HTTP或者FTP仅仅是说底层信道要保证数据的按序传输 ...

  4. Serializable Clonable

    序列化机制有一种很有趣的用法:可以方便的克隆对象,只要对应的类是可序列化的即可.操作流程:直接将对象序列化到输出流中,然后将其读回.这样产生的新对象是对现有对象的一个深拷贝(deep copy).在此 ...

  5. Code Forces 448C Painting Fence 贪婪的递归

    略有上升称号,最近有很多问题,弥补啊,各类竞赛滥用,来不及做出了所有的冠军.这个话题 这是一个长期记忆的主题.这是不是太困难,基本技能更灵活的测试,每次我们来看看这个问题可以被删除,处理然后分段层,贪 ...

  6. HDU - 5186 - zhx&#39;s submissions （精密塔尔苏斯）

    zhx's submissions Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  7. RandomAccessFile实时读取大文件（转）

    最近有一个银行数据漂白系统,要求操作人员在页面调用远端Linux服务器的shell,并将shell输出的信息保存到一个日志文件,前台页面要实时显示日志文件的内容.这个问题难点在于如何判断哪些数据是新增 ...

  8. Codeforces Round #216 (Div. 2) E. Valera and Queries （BIT）

    标题效果: 给很多分布 x 行轴. 然后给出了一个非常的多点集,问该组点分布多少不同段. IDEAS: 分散成多个线段点集的. 给出的线段的话,也就是说这个点集上不会有点在这条线段上. 所以我们就是求 ...

  9. JavaWeb框架的基石

    JavaWeb框架的基石(一) 初学JavaWeb开发,请远离各种框架,从Servlet开始.         Web框架是开发者在使用某种语言编写Web应用服务端是关于架构的最佳实践.很多Web框架 ...

  10. android 有效载荷大图,避OOM

    我们的项目往往会载入图片.有时,承担太多,再装图片,它导致了非常小的程序卡,而在铅oom从而导致异常app再见,今天翻译google官方网站,它已经做了很好的图像处理汇总,由于Google我们已经给解 ...