在JavaScript中，调用iframe框架页面中的函数是跨文档通信的一种常见方式，特别是在网页嵌套或者需要在不同页面间共享数据和功能时。本篇将详细介绍如何实现这一操作，并给出具体的示例代码。
我们需要了解iframe的基本概念。iframe（Inline Frame）是一种HTML元素，用于在网页中嵌入另一个网页，它可以加载不同的源文件，使得在一个页面中可以展示多个独立的内容区域。通过JavaScript，我们可以对这些iframe中的内容进行交互，包括调用其中定义的函数。
调用iframe中函数的方法主要有以下几种：
1. **通过`contentWindow`属性访问**：
当需要调用iframe内的函数时，可以通过`document.getElementById('iframeId').contentWindow`来获取iframe的内容窗口对象，然后在其上执行函数。例如，如果iframe的id为`commentIframe`，且该iframe内定义了一个名为`hasLogined`的函数，调用方式如下：
```javascript
document.getElementById('commentIframe').contentWindow.hasLogined();
```
这种方法需要确保iframe已经加载完成，通常在`window.onload`事件中执行。
2. **通过`window.frames`数组访问**：
`window.frames`是一个包含了所有框架（包括iframe）的窗口对象数组。你可以通过索引来访问它们。例如，如果你的iframe的name属性是`frame1`，你可以这样调用函数：
```javascript
window.frames['frame1'].MyNext();
```
或者
```javascript
self.frames['frame1'].MyNext();
```
如果iframe内定义了一个名为`MyNext`的函数，这将执行它。
3. **在iframe内部调用父页面的函数**：
与之相反，如果需要在iframe内部调用父页面的函数，可以使用`parent`或`parent.window`。例如，在iframe的JavaScript代码中，如果要调用父页面的`ff`函数，可以这样做：
```javascript
parent.window.ff();
```
下面是一个完整的例子，展示了在两个页面间互相调用函数的场景：
**index.html**：
```html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ff(){
alert("this is index's js function index.html");
}
</script>
</head>
<body>
<div style="background: lightblue;">
This is index page.
<input type="button" value="run index's function" onclick="ff();" />
<input type="button" value="run inner page's function" onclick='window.frames["childPage"].sonff();' />
</div>
<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
</body>
</html>
```
**inner.html**：
```html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function sonff(){
alert("this is inner page's js function");
}
</script>
</head>
<body>
<div style="background: lightgreen;">
This is inner page.
<input type="button" value="run index's function" onclick='parent.window.ff();' />
<input type="button" value="run inner page's function" onclick="sonff();" />
</div>
</body>
</html>
```
在这个例子中，`index.html`包含了一个iframe，iframe的src指向`inner.html`。`index.html`中的按钮可以调用`inner.html`中的`sonff`函数，反之亦然，`inner.html`中的按钮也能调用`index.html`中的`ff`函数。
这种跨页面调用函数的方式在实际应用中非常实用，比如在单页面应用程序中进行模块间的通信，或者在复杂网页架构中实现动态交互。但需要注意的是，由于同源策略的限制，只有当主页面和iframe加载的页面拥有相同的源（协议、域名和端口）时，才能互相调用对方的函数。否则，将会受到安全限制，无法直接访问。对于不同源的情况，可以考虑使用`postMessage`和`message`事件进行跨域通信。
VIP享7折，此内容立减5.97元 
