在JavaScript中，操作`iframe`涉及到跨窗口通信，这是Web开发中常见的一种场景。尤其是在处理不同源（origin）的页面时，浏览器的安全策略会限制iframe与父页面之间的交互。本示例主要讨论如何在各种主流浏览器（包括IE和Chrome等）中实现兼容性良好的`iframe`通信。
我们看一个简单的例子，这个例子中父页面（parent.html）和子页面（child.html）位于同一源下。在子页面中，我们尝试通过`window.parent`来调用父页面中的函数`ParentFunction`。这是常见的做法，如下所示：
```html
<!-- parent.html -->
<html>
<head>
<script>
function ParentFunction() {
alert('ParentFunction');
}
</script>
</head>
<body>
<input type="button" id="btnCancel" value="测试" />
<iframe id="FRMdetail" src="child.html"></iframe>
</body>
</html>
<!-- child.html -->
<html>
<head>
<script>
$(document).ready(function () {
$("#btnTest").click(function (e) {
var t = window.parent;
t.ParentFunction();
});
});
</script>
</head>
<body>
<input type="button" id="btnTest" value="应该获取的值" />
</body>
</html>
```
在Internet Explorer中，这种做法通常能够正常工作，但Chrome和其他基于Webkit的浏览器可能会遇到同源策略的问题。错误信息是：“Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.” 这意味着由于安全原因，浏览器阻止了跨域访问。
为了解决这个问题，我们可以使用HTML5引入的`postMessage` API，这是一种安全的跨窗口通信方式。以下是如何使用`postMessage`进行通信的示例：
```html
<!-- parent.html -->
<html>
<head>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(e) {
var data = e.data;
if (data === 'ParentFunction') {
ParentFunction();
}
}
function ParentFunction() {
alert('ParentFunction');
}
</script>
</head>
<body>
<input type="button" id="btnCancel" value="测试" />
<iframe id="FRMdetail" src="child.html"></iframe>
</body>
</html>
<!-- child.html -->
<html>
<head>
<script>
$(document).ready(function () {
$("#btnTest").click(function (e) {
window.parent.postMessage('ParentFunction', '*');
});
});
</script>
</head>
<body>
<input type="button" id="btnTest" value="应该获取的值" />
</body>
</html>
```
在这个例子中，子页面通过`postMessage`向父页面发送一个消息，父页面通过监听`message`事件来接收这个消息，并调用相应的函数。`'*'`作为第二个参数表示接受任何源的消息，但在实际应用中，你应该指定一个具体的源，以提高安全性。
使用`postMessage`的好处在于它不仅解决了跨域问题，而且是W3C标准的一部分，因此在所有现代浏览器中都有很好的支持。对于那些不支持`postMessage`的旧版浏览器（如IE8），可能需要使用其他方法，如设置`window.name`或者利用`window.location.hash`进行通信，但这会更复杂，且存在一些安全风险。
处理`iframe`的跨窗口通信时，应优先考虑使用`postMessage`，并确保在设计时考虑到不同浏览器的兼容性。对于不同源的`iframe`，则需要遵守同源策略，并采取适当的安全措施。
