js跨域调用iframe内容

基础概念

JavaScript跨域调用是指在不同的域名、协议或端口之间进行数据交互。由于浏览器的同源策略（Same-Origin Policy），默认情况下，JavaScript只能访问与其自身来源相同的资源。跨域调用通常用于在不同域的页面之间共享数据或功能。

类型

CORS（Cross-Origin Resource Sharing）：服务器端设置特定的HTTP头，允许特定的外部域访问资源。
JSONP（JSON with Padding）：通过动态创建<script>标签来加载跨域数据，但只支持GET请求。
代理服务器：在同源服务器上设置代理，通过服务器中转实现跨域请求。
WebSocket：通过WebSocket协议进行全双工通信，不受同源策略限制。

应用场景

第三方登录：如使用Google或Facebook账号登录。
广告投放：不同域的广告平台需要在主页面上展示广告。
数据分析：不同域的网站需要共享用户行为数据进行分析。

示例代码

CORS示例

假设服务器端设置了CORS头：

// 服务器端（Node.js）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

客户端请求：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

JSONP示例

<script>
function handleResponse(data) {
  console.log(data);
}
</script>
<script src="https://api.example.com/data?callback=handleResponse"></script>

代理服务器示例

在同源服务器上设置代理：

// 服务器端（Node.js）
const express = require('express');
const request = require('request');

const app = express();

app.get('/proxy', (req, res) => {
  request('https://api.example.com/data', (error, response, body) => {
    if (!error && response.statusCode == 200) {
      res.send(body);
    }
  });
});

app.listen(3000);

客户端请求：

fetch('/proxy')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

遇到问题及解决方法

问题：跨域调用iframe内容时出现安全错误

原因：浏览器的同源策略阻止了跨域访问。

解决方法：

CORS：确保服务器端设置了正确的CORS头。
postMessage API：使用postMessage进行跨域通信。

// 父页面
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
  iframe.contentWindow.postMessage('Hello from parent', 'https://target-domain.com');
};

window.addEventListener('message', event => {
  if (event.origin !== 'https://target-domain.com') return;
  console.log(event.data);
});

// iframe页面（https://target-domain.com）
window.addEventListener('message', event => {
  if (event.origin !== 'https://parent-domain.com') return;
  console.log(event.data);
  event.source.postMessage('Hello from iframe', event.origin);
});

通过以上方法，可以有效解决JavaScript跨域调用iframe内容时遇到的问题。