在JavaScript编程中，有时我们需要获取Iframe（内联框架）中的内容，这在处理嵌套页面、跨域通信或者实现动态加载时非常常见。本文将详细介绍如何在各种浏览器，包括Internet Explorer（IE）和Firefox（FF）等主流浏览器中，正确地获取Iframe中的内容。
理解Iframe的基本概念。Iframe是一种HTML元素，允许我们在一个网页中嵌入另一个网页。它通过`<iframe>`标签创建，可以设置`src`属性指向要嵌入的页面URL。例如：
```html
<iframe id="myIFrame" src="http://example.com"></iframe>
```
获取Iframe内容的关键在于JavaScript的`contentWindow`或`contentDocument`属性。在非跨域情况下，可以通过以下方式访问：
1. `contentWindow`: 对于支持DOM操作的浏览器（如FF），`contentWindow`属性可以直接访问到Iframe的全局窗口对象。
2. `contentDocument`: 如果需要访问Iframe中的HTML文档，可以使用`contentDocument`属性。在非IE浏览器中，它返回的是`HTMLDocument`对象；在IE中，返回的是`HTMLDocument`的一个实现，即`ActiveXObject`。
以下是一段通用的代码示例，用于获取Iframe中的文本内容：
```javascript
function getIFrameContent(iframeId) {
var iframe = document.getElementById(iframeId);
if (iframe.contentDocument) {
// 非IE浏览器
return iframe.contentDocument.body.innerHTML;
} else if (iframe.contentWindow) {
// IE浏览器
return iframe.contentWindow.document.body.innerHTML;
}
}
var content = getIFrameContent('myIFrame');
console.log(content);
```
对于跨域问题，由于同源策略的限制，我们不能直接访问不同源的Iframe内容。但有一种特殊情况，叫做“PostMessage”通信，可以实现跨域数据交换。在Iframe内部和外部页面分别发送和监听`message`事件，实现数据传递：
```javascript
// 在外部页面
window.addEventListener('message', function(event) {
if (event.origin !== 'http://example.com') return; // 检查来源以防XSS攻击
console.log('接收到Iframe消息:', event.data);
}, false);
// 在Iframe内部
parent.postMessage('Hello from IFrame!', 'http://example.com');
```
在提供的压缩包文件中，有`TestIFrame.htm`和`MyIFrame.htm`两个文件。`TestIFrame.htm`可能是包含Iframe的父页面，而`MyIFrame.htm`可能是被嵌入的Iframe内容。你可以根据上述方法，尝试在这些文件中实现Iframe内容的获取和交互。
总结一下，本文主要介绍了如何在JavaScript中获取Iframe内容，包括非跨域情况下的`contentWindow`和`contentDocument`属性，以及跨域通信的`PostMessage`方法。通过这些技术，开发者可以有效地处理Iframe相关的复杂场景。
MyIFrame.zip （2个子文件） 
TestIFrame.htm 454B
