jquery获取iframe中的dom对象(两种方法)

以下是详细讲解。

概述

在Web开发中，我们常常需要在iframe中进行DOM操作，但是直接通过jQuery选择器获取iframe内部的DOM对象并不容易，需要使用一些特定的方法。

本文将介绍两种方法来获取iframe中的DOM对象，并且给出示例说明。

方法一：contentWindow 和 contentDocument

通过contentWindow和contentDocument可以获取iframe内部的DOM对象，这里的contentWindow和contentDocument都是DOM属性对象，不是jQuery的方法。

获取iframe元素

在获取iframe内部的DOM对象之前，先需要获取iframe元素本身。可以使用jQuery选择器或者原生的document.getElementById方法来获取iframe元素。示例代码如下：

// 使用jQuery选择器获取iframe元素
var $iframe = $('#my-iframe');

// 使用document.getElementById方法获取iframe元素
var iframe = document.getElementById('my-iframe');

通过contentWindow获取内部DOM对象

contentWindow属性是Window对象，可以通过它来获取iframe内部的DOM对象。示例代码如下：

var $iframe = $('#my-iframe');
var iframe = $iframe[0];
var innerDoc = iframe.contentWindow.document;
var $innerBody = $(innerDoc.body);

上面的代码中，首先使用jQuery选择器获取了iframe元素，然后通过数组下标的方式获取iframe元素本身的DOM对象，接着通过contentWindow属性获取内部Document对象，并且获取body元素。

通过contentDocument获取内部DOM对象

与contentWindow不同，contentDocument属性是Document对象，可以直接获取内部的DOM对象。示例代码如下：

var $iframe = $('#my-iframe');
var iframe = $iframe[0];
var innerDoc = iframe.contentDocument;
var $innerBody = $(innerDoc.body);

上面的代码中，使用的方法同上一个示例，但是获取内部的DOM对象的方式不同，通过contentDocument属性来直接获取。

方法二：contents方法

contents方法是jQuery特有的方法，可以用来获取iframe中的DOM对象。

获取iframe元素

同样，需要先获取iframe元素本身，使用的方法与方法一中相同。示例代码如下：

var $iframe = $('#my-iframe');
var iframe = $iframe[0];

使用contents方法获取内部DOM对象

接下来可以使用jQuery的contents方法来获取内部DOM对象。示例代码如下：

var $iframe = $('#my-iframe');
var iframe = $iframe[0];
var $innerBody = $iframe.contents().find('body');

上面的代码中，先获取了iframe元素，然后使用contents方法获取内部的DOM对象，find方法用来查找body元素。

总结

本文介绍了两种方法来获取iframe中的DOM对象，第一种方法使用了contentWindow和contentDocument属性，第二种方法使用了jQuery的contents方法。在实际开发中，根据不同的需求选择不同的方法。

示例代码中的iframe元素可以使用你自己的元素代替，只需要将代码中的选择器修改为你自己的选择器即可。