iframe 跨域，有没办法获取 iframe子页面元素

server {
    listen       80;
    server_name  aaa.xxx.com;

    location / {
        proxy_pass  https://www.qq.com/;
        proxy_set_header Host www.qq.com;
        proxy_set_header X-Forwarded-For $remote_addr;

        # 禁用压缩，否则替换不生效(注意:禁用压缩会带来流量上涨)
        proxy_set_header Accept-Encoding '';

        # 插入 JS 代码，编译的时候要增加 --with-http_sub_module 参数
        sub_filter '</head>' '</head><script>document.domain = \'xxx.com\';</script>';
        sub_filter_once off;   
    }
}
server {
    listen       80;
    server_name  bbb.xxx.com;
    root /home/www/bbb.xxx.com;

    location / {
    }
}

然后写一个测试代码/home/www/bbb.xxx.com/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <iframe style="width: 100%;height: 100%" id="iframe" src="http://aaa.xxx.com"></iframe>
</body>
<script>
  document.domain = 'xxx.com';
  var iframe = document.getElementById('iframe');
  iframe.onload = function(){
    // 获取 iframe 中 id 为 sosobar 元素
    console.log('iframe', iframe.contentWindow.document.getElementById('sosobar'));
  }
</script>
</html>

启动Nginx, 访问bbb.xxx.com查看结果

可以看到，iframe已经实现跨域了，不过这样做，有些问题还是不能忽略的

https问题
站点有检测代码
通过独立域名加载的JS、CSS、png，可能有跨域或者权限问题
更改了domain造成某些资源无法获取

ps: 如果有好的方案欢迎分享

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

iframe 跨域，有没办法获取 iframe子页面元素

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

iframe 跨域，有没办法获取 iframe子页面元素

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？