解析Jquery取得iframe中元素的几种方法

当我们在网页开发中使用iframe标签嵌入子网页时，经常需要通过JavaScript代码获取到子网页中的特定元素。以下是解析Jquery取得iframe中元素的几种方法：

方法一：直接访问iframe元素

可以通过访问iframe元素的contentDocument和contentWindow属性，来获取子网页中的元素。

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

假设子页面中有一个div元素：

<div id="target">这是子页面的div元素</div>

我们可以通过以下代码来访问：

var iframe = $("#child")[0]; // 获取iframe元素对象
var target = iframe.contentDocument.getElementById("target"); // 访问子网页中的元素
console.log(target.innerHTML); // 输出该元素的内容

上述代码将输出“这是子页面的div元素”，这就是我们想要的结果。

方法二：使用Jquery的contents()方法

另一个比较简单的解析iframe中元素的方式是使用Jquery的contents()方法。

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

我们可以通过以下代码来访问iframe中的元素：

var target = $("#child").contents().find("#target");
console.log(target.text()); // 输出该元素的内容

上述代码与方法一的效果相同。

示例一

假设我们有一个父页面parent.html，嵌入了一个子页面child.html，子页面中有一个id为“title”的元素，我们可以使用以上两种方法来获取这个元素的内容。

方法一：

var iframe = $("#child")[0]; // 获取iframe元素对象
var target = iframe.contentDocument.getElementById("title"); // 访问子网页中的元素
console.log(target.innerHTML); // 输出该元素的内容

方法二：

var target = $("#child").contents().find("#title");
console.log(target.text()); // 输出该元素的内容

以上两种方法都可以用来获取子页面中id为“title”的元素。

示例二

假设我们在子页面中有一个表单form，父页面中需要获取该表单的所有输入框的值。我们可以使用以下代码：

var iframe = $("#child")[0]; // 获取iframe元素对象
var inputs = iframe.contentDocument.getElementsByTagName("input"); // 获取所有input元素
var values = [];
for (var i = 0; i < inputs.length; i++) {
  values.push(inputs[i].value); // 获取所有input元素的值，存入数组中
}
console.log(values); // 输出该表单的所有输入框的值

以上代码可以用来获取子网页中所有input元素的值，我们可以根据实际情况来改写。