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属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

求一个可以自定义排期的日历，类似于钉钉日历？

git提交记录问题？

如何用 CSS 实现卡片顶部内凹效果？