时间戳

首页 > 解决方案 > iframe 导致文档高度等于 IOS 设备（chrome 和 safari）上的窗口/视口高度

javascript - iframe 导致文档高度等于 IOS 设备（chrome 和 safari）上的窗口/视口高度

问题描述

我正在尝试在我的网站中嵌入一个我无法控制的网站。

标题提到的问题我在 iframe 中面临无限滚动。如果我尝试打开原始网站，它正在工作。有谁知道为什么会这样？

检查此https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/站点以查看预期结果。而如果您尝试将其加载到 iframe 中，它将无法正确呈现。代码：

<iframe  src="https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/"></iframe>

更新：调试该页面后，我发现有一个奇怪的行为，即文档高度等于窗口/视口高度，这就是这个问题的原因。什么可能导致这样的行为（文档高度 == 窗口高度），我找不到任何使用 API（如 resizeto 或其他东西）修改窗口高度的代码部分。

笔记：

  1. 加载的网站大小约为 20MB。
  2. 它在 Andorid 设备上正确打开。
  3. 对于 Iphone，如果滚动动画分叉，那么我的网站完全崩溃了。

标签： javascriptjqueryiosiframerevolution-slider

解决方案

我遇到了完全相同的问题。一旦我弄清楚就会发布答案。到目前为止，我发现所有发布的解决方案都没有奏效（可能是因为我在 CSS 方面是个业余爱好者）。

编辑（x-post/repost）：

好的，所以我找到的答案是，如果你为你的 iframe 设置 scrolling=no，那么这个 bug 就会消失。不幸的是，我正在处理的项目需要有一个滚动 iframe，所以这对我来说是个问题，但我希望这个解决方案能有所帮助！

var iFrame = document.getElementById("iFrame");
iFrame.scrolling = "no";

推荐阅读