在 iframe 跨域情况下
获取父页面元素，由于同源策略的限制（同源策略限制一个源的文档或脚本与另一个源的交互，源定义为协议、域名和端口的组合），不能直接
获取父页面元素，不过可以通过以下几种常见方法来实现：
### 使用 postMessage API
`window.postMessage` 是 HTML5 引入的一个跨域通信的重要 API，它允许不同源的窗口之间进行安全的消息传递。
在
父页面的代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="parentElement">这是
父页面的
元素</div>
<iframe id="myFrame" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
const iframe = document.getElementById('myFrame');
window.addEventListener('message', function (event) {
if (event.origin === 'http://anotherdomain.com') {
const parentElement = document.getElementById('parentElement');
event.source.postMessage(parentElement.textContent, event.origin);
}
});
</script>
</body>
</html>
```
在 iframe 页面的代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
window.parent.postMessage('请求
父页面元素内容', 'http://yourparentdomain.com');
window.addEventListener('message', function (event) {
if (event.origin === 'http://yourparentdomain.com') {
console.log('从
父页面获取的
元素内容：', event.data);
}
});
</script>
</body>
</html>
```
###
JSONP（
JSON with Padding）
JSONP 是一种古老的跨域数据交互技术，它利用了 `<script>`
标签的 `src` 属性不受同源策略限制的特点。不过它只能实现跨域的 GET 请求，并且安全性相对较低。
在
父页面的代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="parentElement">这是
父页面的
元素</div>
<script>
function handleResponse(data) {
console.log('从 iframe
获取的数据：', data);
}
</script>
<script src="http://anotherdomain.com/iframe.
js?callback=handleResponse"></script>
</body>
</html>
```
在 iframe 页面的代码示例（假设为 `iframe.
js`）：
```
javascript
handleResponse({ message: '来自 iframe 的消息' });
```
### CORS（跨域资源共享）
如果服务器端支持 CORS，那么可以通过在服务器端设置响应头来允许跨域请求。
在
父页面的代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="parentElement">这是
父页面的
元素</div>
<iframe id="myFrame" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
const iframe = document.getElementById('myFrame');
iframe.addEventListener('load', function () {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://anotherdomain.com/api/data', true);
xhr.withCredentials = true;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('从 iframe 跨域
获取的数据：', xhr.responseText);
}
};
xhr.send();
});
</script>
</body>
</html>
```
在服务器端（假设为 Node.
js + Express）的代码示例：
```
javascript
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://yourparentdomain.com');
res.setHeader('Access-Control-Allow-Credentials', 'true');
next();
});
app.get('/api/data', (req, res) => {
res.send({ message: '来自 iframe 服务器的数据' });
});
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
```
扫一扫
3036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
