在网页开发中，有时我们需要在不同的iframe之间或从父页面操作iframe中的DOM元素。这个场景通常涉及到jQuery对iframe的同域操作。同域意味着iframe的源URL与包含它的页面在同一域名下，这允许我们使用JavaScript和jQuery来交互数据和修改DOM。本文将详细解释如何利用jQuery在同域环境下进行iframe的DOM操作。
让我们看看一个基本的示例，其中有两个同域的iframe（a.php和b.php），以及两个按钮用于读取和写入iframe #aa的内容：
```html
<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="读取iframe #aa">
<input type="button" id="write-aa" value="写入iframe #aa">
```
当点击“读取iframe #aa”按钮时，我们使用以下jQuery代码来获取iframe #aa的body内的HTML内容：
```javascript
$('#read-aa').click(function() {
var v=$('#aa').contents().find('body').html();
alert(v);
});
```
`contents()` 方法返回iframe的文档对象，`find('body')` 选取iframe内的body元素，然后获取其HTML内容。
而点击“写入iframe #aa”按钮时，我们将新内容追加到iframe #aa内div元素的末尾：
```javascript
$('#write-aa').click(function() {
$('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');
});
```
这段代码在iframe的div元素内部添加了一个水平线和一段文本。
接下来，我们探讨如何从iframe内部操作父页面的DOM。假设iframe #bb中的代码如下：
```html
<!DOCTYPE html>
<meta charset="utf-8">
<title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title>
<script src="public/jQuery.js"></script>
<script>
$(function() {
$('#read-parent-aa').click(function() {
var v=$('body',parent.document).find('#aa').contents().find('body').html();
alert(v);
});
$('#write-parent-aa').click(function() {
$('body',parent.document).find('#aa').contents().find('div').append('<hr>这是bb.php操作aa.php写入的内容');
});
});
</script>
<div>这是iframe #bb里的内容</div>
<input type="button" id="read-parent-aa" value="跨父读取iframe #aa">
<input type="button" id="write-parent-aa" value="跨父写入iframe #aa">
```
这里的重点在于使用 `parent.document` 来引用父页面的文档对象。当点击“跨父读取iframe #aa”按钮时，它会读取父页面中iframe #aa的body内容；而“跨父写入iframe #aa”按钮则在父页面的iframe #aa的div元素内添加内容。
总结来说，jQuery提供了强大的功能，使我们在同域环境下可以轻松地对iframe进行DOM操作。通过`contents()`方法，我们可以访问和修改iframe内的DOM结构。同时，结合使用`parent.document`，我们可以实现从iframe到父页面的DOM交互。这些技术在处理复杂页面布局和交互时非常有用，尤其是在需要实现特定功能，如上传、模拟选择框、代理或跨域通信等场景。
