1 个回答
在同源策略的限制下,无法直接跨域修改 iframe 中页面的内容。如果你想要跨域修改 iframe 中的内容,可以考虑以下两种方法:
- 使用 postMessage
可以在父窗口和子窗口之间建立通信渠道,使用 postMessage 方法进行跨域通信。具体步骤如下:
在子窗口中,定义一个接收消息的事件处理函数:
javascript
window.addEventListener('message', function(event) {
if (event.origin !== 'https://example.com') {
return;
console.log('Received message from parent:', event.data);
在父窗口中,使用 postMessage 方法发送消息到子窗口:
javascript
var iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');
- 使用代理页面
可以在同一域名下,创建一个代理页面,通过该页面实现跨域访问。具体步骤如下:
在代理页面中,设置 Access-Control-Allow-Origin 响应头,允许跨域访问:
javascript
response.setHeader('Access-Control-Allow-Origin', 'https://example.com');
在父窗口中,通过 Ajax 或 Fetch 方法,向代理页面发起请求,获取子窗口中页面的内容:
javascript
fetch('https://your-proxy-page.com?url=https://example.com')
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
在代理页面中,获取请求参数中的 URL,并使用 XMLHttpRequest 或 Fetch 方法,向该 URL 发起请求:
javascript
var url = new URLSearchParams(window.location.search).get('url');
fetch(url)