如何使 iFrame 可以完全访问页面答案

【问题标题】：How to make a page full accesible by iFrame如何使 iFrame 可以完全访问页面
【发布时间】：2021-05-28 00:59:33
【问题描述】：

页面 1 可以很好地加载到 iframe 中，但是当我尝试通过 JS 访问时出现此错误。

Uncaught DOMException: Blocked a frame with origin "https://domain1.com" from accessing a cross-origin frame（试图访问的框架在“https://domain2.com”）

我在两台服务器中都拥有完全访问权限，并且我已经尝试过使用 'X-Frame-Options' & header 'Access-Control-Allow-Origin' header，甚至试图删除 X-Frame-Options 标头。

我不知道还能做什么。

【问题讨论】：

X-Frame-Options 表示是否允许浏览器显示 (i)frames 内的内容，Access-Control-Allow-Origin 适用于跨域HTTP 请求。这些都与访问 iframe 文档中的元素没有任何关系 - 如果来源不同，Same Origin Policy 只会阻止您这样做。
好的，那我还能尝试什么？
您可以先正确解释一下您首先要解决的实际问题。然后我们也许可以判断，是否有其他方法，或者您想要的东西是否根本不可能开始。
好的，谢谢回复，每次嵌入站点更改其网址时，希望通过 iframe 获取嵌入页面的高度以更改 iframe 标签容器的高度。但是每次我想访问嵌入站点时，我都会收到此错误。
这是可能的，如果对方积极支持，你会需要他们的“帮助”。 iframe 必须通过postMessage 之类的方式向父页面报告自己的内容高度，然后父页面可以调整 iframe 元素的高度。请咨询您的小部件的提供商，他们是否提供类似的服务。

标签： php html apache iframe

【解决方案1】：

我建议您不要将 iframe 用于您的用例。相反，通过 XHR 调用获取要插入页面的内容，然后将其直接插入页面。这仅在您插入您自己控制的内容时才有效。

这样，内容实际上将位于主网页的 DOM 中，并且内容周围的外部元素会自动增加高度，这取决于您的 CSS 溢出设置等。

以下是我如何将企业网站的中心页脚加载到同一公司的许多网站的示例：

...

  <div id='lazyFooter'></div>

</body>

<script>
function footerCallback(json_data){
  document.getElementById('lazyFooter').outerHTML = json_data[0];
}
window.onload = function() {
  var script = document.createElement('script');
  script.src = 'https://footers.ourcompany.com/footer.min.json'
  script.async = true;
  document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

此示例使用 JSONP，因此您加载的文件需要格式化为 Javascript 函数：

footerCallback(["\ <style class=\"embed\">\n\
@font-face{font-family:'Darby Sans ...  </style><footer class=\" 
... </div>\n\ </footer>\n\ "]);

如果您要嵌入其他人的内容并且它没有格式化为 JSONP 响应，那么您（至少）有两个选择：

改用 iframe 并处理 Javascript 设置高度的麻烦。（丑陋，不能跨浏览器移植。）
使用 AWS Lambda 函数或其他东西部署一个简单的服务器端微服务，用于在服务器端获取第三方内容并将其打包为 JSONP 响应，您可以嵌入到您的页面中。或者，如果您可以在与您的网站相同的域上运行该微服务，那么您无需担心 JSONP，您只需通过微服务将来自第三方网站的裸 HTML 代理到您的 XHR 调用。

【讨论】：