html - 如何强制响应式 iframe 目标尊重 iframe 的视口并做出响应,就好像它被直接访问一样?
问题描述
以下站点在直接访问时完全响应:
但是,当通过 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 访问时,目标站点设置的宽度为 1093px,但直接访问时并没有这样做,然后调整大小,所以这可能就是我尝试过的不同解决方案不起作用的原因。换句话说,目标站点的行为会有所不同,具体取决于浏览器是直接访问它还是通过 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>
解决方案
这是prosolutionplus.com上的CORS问题。如果您在其自己的小选项卡中打开该站点,然后关闭JavaScript,您会注意到它设置了相同的 1093 像素,并且其行为与 iframe 时一样。
如果您在 iframeing prosolutionplus.com时打开 JavaScript 控制台,您会注意到一个 CORS 错误弹出,说明:
frontend.min.js?ver=2.4.5.1:5 Uncaught DOMException: Blocked a frame with origin " https://www.prosolutionplus.com " 访问跨域框架。`
看起来这个问题是由 Thrive Editor 引起的。此外,这里有一个关于跨域的快速 SO 阅读及其被阻止的原因:SecurityError: Blocked a frame with origin from access a cross-origin frame
推荐阅读
- node.js - 无法检索项目:未知错误。请联系支持。Heroku nodejs
- javascript - 为什么我的状态没有在这个组件中设置
- html - 如何从 express => html 发送数据
- javascript - 如何在 discord.js 中制作循环命令?
- json - Ruby - 尝试使用嵌套散列迭代散列(在反序列化 JSON 对象之后)
- javascript - 如何选择第一个可用选项
- typescript - Typescript 使用路径来引用与文件路径不同的文件夹中的类型
- python - 简单的scapy脚本不发送数据包
- javascript - Intellisense 不适用于 VS 2019 PREVIEW 中的 Javascript
- uci - 如何使用 UCI 国际象棋引擎(例如 Stockfish)设置自定义棋盘