Jquery方式获取iframe页面中的 Dom元素

获取 IFRAME 页面中的 DOM 元素，可以通过两种方式实现：直接获取子页面中的元素对象或通过 iframe 的 contentWindow 属性获取子页面的 window 对象，从而操作其中的 DOM 元素。以下是使用 jQuery 的方式获取 IFRAME 页面中 DOM 元素的攻略。

使用 jQuery 的方式获取 IFRAME 页面中的 DOM 元素

方法一：直接获取子页面中的元素对象

1. 在 HTML 页面中，使用 iframe 元素加载子页面：

<iframe src="child.html" id="myIframe"></iframe>

1. 使用 jQuery 获取子页面中的 DOM 元素：

//获取 iframe 元素
var iframe = $('#myIframe')[0];

//获取 iframe 中的 body 元素
var iframeBody = iframe.contentDocument.body;

//获取子页面中的元素对象
var childElement = $(iframeBody).find('#childElementId');

这样就获取到了子页面中的 DOM 元素。

方法二：通过 iframe 的 contentWindow 属性获取子页面的 window 对象

1. 在 HTML 页面中，使用 iframe 元素加载子页面：

<iframe src="child.html" id="myIframe"></iframe>

1. 通过 iframe 的 contentWindow 属性获取子页面的 window 对象，并从中获取元素对象：

//获取 iframe 的 window 对象
var childWindow = $('#myIframe')[0].contentWindow;

//获取子页面中的元素对象
var childElement = $(childWindow.document.body).find('#childElementId');

这样就获取到了子页面中的 DOM 元素。

示例说明

示例一：获取子页面中的文本框对象

<iframe src="child.html" id="myIframe"></iframe>

//获取 iframe 元素
var iframe = $('#myIframe')[0];

//获取 iframe 中的 body 元素
var iframeBody = iframe.contentDocument.body;

//获取子页面中的文本框元素对象
var childInput = $(iframeBody).find('input[type="text"]');

示例二：获取子页面中的按钮对象

<iframe src="child.html" id="myIframe"></iframe>

//获取 iframe 的 window 对象
var childWindow = $('#myIframe')[0].contentWindow;

//获取子页面中的按钮元素对象
var childButton = $(childWindow.document.body).find('button');

这样就获取到了子页面中的文本框和按钮元素对象。