如何强制响应式 iframe 目标尊重 iframe 的视口并做出响应，就好像它被直接访问一样？

Posted 2023-03-06

【中文标题】如何强制响应式 iframe 目标尊重 iframe 的视口并做出响应，就好像它被直接访问一样？

【英文标题】：How to force responsive iframe target to respect viewport of iframe and behave responsively as if it were being accessed directly?

【发布时间】：2020-04-28 18:44:28

【问题描述】：

以下网站在直接访问时完全响应：

https://prosolutionplus.com/

但是，当通过 iframe 访问时，它的响应行为不正常并且不符合浏览器的宽度：

iframe 
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     

<div class="iframeContainer">
   <iframe src="https://prosolutionplus.com/">
   </iframe>
</div>

https://jsfiddle.net/g2eupd80/

我已经尝试了所有我能找到的 iframe 响应式解决方案（包括上面实际适用于其他响应式网站的解决方案），但 没有 在这个特定网站上有效。 我注意到，当通过 iframe 访问时，目标站点设置的宽度为 1093 像素，但它不会在直接访问时这样做，然后调整大小，所以这可能是为什么我尝试过的不同解决方案不起作用。换句话说，目标网站的行为不同取决于浏览器是直接访问还是通过 iframe 访问。

为此，目标网站在通过 iframe 访问时显然检测到的东西不同，而不是直接访问时，我只是不知道那是什么。

我该如何解决这个问题，以便 iframe 像浏览器一样被对待，以便目标网站在 iframe 中响应？

比较上面的 JSFiddle 示例，它在直接访问时响应，但在通过 iframe 访问时不响应，下面的示例在直接访问和通过 iframe 访问时都是响应的。 代码中唯一的区别是 URL。

iframe 
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     

<div class="iframeContainer">
   <iframe src="https://www.vigrxplus.com/">
   </iframe>
</div>

https://jsfiddle.net/phL2nt34/

【参考方案1】：

这是prosolutionplus.com 上的CORS 问题。如果您在其自己的小标签中打开该网站，并关闭 JavaScript 关闭，您会注意到它设置了相同的 1093 像素，并且其行为与 iframe 时的行为相同。

如果您在 iframing prosolutionplus.com 时打开 javascript 控制台，您会注意到一个 CORS 错误弹出，说明：

frontend.min.js?ver=2.4.5.1:5 未捕获的 DOMException：阻止具有源“https://www.prosolutionplus.com”的框架访问跨域框架。`

看起来这个问题是由 Thrive 编辑器引起的。此外，这里有一个关于 Cross-Origin 的快速 SO 阅读以及它被阻止的原因：SecurityError: Blocked a frame with origin from accessing a cross-origin frame

【讨论】：

感谢您确定原因。我该如何解决这个问题？

您需要向 Thrive 开发人员提出这个问题。问题出在frontend.min.js 文件中，当未缩小时，它位于windowWidth 函数的第1113-1115 行。它试图引用并不总是在同一个域中的父窗口（您会注意到，如果您通过开发工具在 prosolutions 站点中 iframe 它确实工作：Example。）。或者，如果您管理站点，您可以自己编辑 JS 文件，但每次更新 Thrive 插件时它都会被覆盖。

如果您管理该站点，您实际上还可以dequeue 该脚本和enqueue 它的修改副本 - 这将防止更新问题 - 除非插件的其余部分得到更新并且需要在该文件中进行更新，因此最好联系 Thrive 开发人员，看看他们是否可以更新它以修改该函数以检查跨域帧。

我认为我不太可能让任何人最终真正解决这个问题，所以我最终解决这个问题的最佳方法是什么？尽可能响应式 iframe？我尝试使用 CSS 变换比例、负边距等，并且有点接近于让网站在 iframe 中看起来有点像样，但是在更改窗口宽度时它不是很一致。也许使用 Javascript 进行一些动态缩放以根据屏幕宽度修改缩放效果会更好。你提出什么解决方案和代码？

老实说，要可靠操作 iframed 内容，您无能为力。多年来，CORS 政策和浏览器安全更新使这变得越来越难。如果您使用的是 WordPress，我实际上编写了一个插件，旨在将登录页面以全屏格式嵌入您的网站，称为 Content Mask。 iframe 也有同样的问题，但如果你使用下载方法，它就可以工作。链接当然仍然默认链接到父站点。 Example