javascript之Iframe之间通信

本文讨论都是在同域（同一域名，同一端口，同一协议）下进行。

以下我们讨论三个问题：1、iframe子页面和父页面相互获取元素，2、iframe子页面和父页面相互调用方法和变量。

一. iframe子页面和父页面相互获取元素

1. 子页面获取父页面元素

//获取父页面 $("#id")的元素

Js原生：window.parent.document.getElementById ("元素id");

Jquery： $("#id", parent.document);

2. 父页面获取子页面元素

//获取子页面 $("#id")的元素

Js原生：window.frames[iframe序号].document.getElementById("元素id");

Jquery：$("#iframeID").contents().find("#元素ID");

图1、获取元素

二. iframe子页面和父页面相互调用方法和变量

1. 子页面调用父页面方法和变量

//调用父页面方法和变量

window.parent.func(); //调用方法

window.parent.value; //调用变量

2. 父页面调用子页面方法和变量

//调用子页面方法和变量

window.frames[iframe序号].func();//调用方法

window.frames[iframe序号].value; //调用变量

图2、调用方法和变量

说明：

1. iframe之间相互通信的前提是页面加载完成，所以我们从上面可以看到 父页面获取子页面元素，调用子页面方法、变量时使用了window.frames[0].onload =function(){}包裹来确保子页面加载完成。

2. 父页面获取子页面iframe内容不止上述一种方法，还可以iframe的id和iframeName来获取，即document.getElementById('iframeId').contentWindow.document.getElementById('子页面中的元素ID');和iframeName.window.document.getElementById('子页面中的元素ID');