以下是一个使用`iframe`进行AJAX调用的简单示例。不过，需要注意的是，`iframe`本身并不直接执行AJAX请求，但可以通过在`iframe`中加载的页面上执行JavaScript代码来间接实现AJAX功能。这里，我将展示一个如何在父页面通过操作`iframe`中的JavaScript来触发AJAX请求的例子。
### 父页面HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Page</title>
<script>
function triggerAjaxInIframe() {
// 假设iframe的id是'myIframe'
var iframe = document.getElementById('myIframe');
// 如果iframe已经加载完成
if (iframe.contentWindow && iframe.contentWindow.document) {
// 通过contentWindow访问iframe中的window对象，并执行其中的函数
iframe.contentWindow.postMessage({ type: 'triggerAjax' }, '*'); // '*' 表示可以发送到任何来源，实际使用中应该指定具体的来源
}
}
</script>
</head>
<body>
<button onclick="triggerAjaxInIframe()">Trigger AJAX in Iframe</button>
<iframe id="myIframe" src="iframe-page.html" width="600" height="400"></iframe>
</body>
</html>
### Iframe页面HTML (`iframe-page.html`)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Page</title>
<script>
window.addEventListener('message', function(event) {
// 检查消息来源
if (event.origin !== 'http://your-parent-page-domain.com') { // 替换为你的父页面域名
return;
}
// 检查消息类型
if (event.data.type === 'triggerAjax') {
// 在这里执行AJAX请求
console.log('AJAX will be triggered in iframe...');
// 示例AJAX请求（使用fetch API）
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Data:', data);
// 可以选择将数据发送回父页面
// window.parent.postMessage({ type: 'ajaxResponse', data: data }, '*');
})
.catch(error => console.error('Error:', error));
}
}, false);
</script>
</head>
<body>
<h1>Iframe Content</h1>
</body>
</html>
**注意**：
- 在这个例子中，父页面通过`postMessage`方法向`iframe`发送消息，`iframe`中的JavaScript监听这些消息，并根据消息类型执行相应的操作，如AJAX请求。
- `postMessage`的第二个参数是目标源（target origin），这里使用了`'*'`，表示消息可以发送到任何源。然而，出于安全考虑，你应该在父页面和`iframe`页面之间约定一个具体的源，并在这里进行验证。
- AJAX请求使用了`fetch` API，这是现代浏览器中推荐的方式。不过，你也可以使用`XMLHttpRequest`或其他库（如jQuery的`$.ajax`）来实现。
- 示例中的URL（如`https://api.example.com/data`）和域名（如`http://your-parent-page-domain.com`）需要替换为你实际使用的URL和域名。